type
status
date
slug
summary
tags
category
icon
password
如何适配屏幕
假设我们设计稿中的宽高比是 16 : 9 , 那么大屏也最好显示 16 : 9，且正好是上下居中，左右居中的，如果大屏的宽高比较奇怪，如果屏幕很高，我们就左右居中，如果屏幕很宽，我们就上下居中
可以总结出来适配屏幕的算法:
- 如果设备的宽高比大于 16：9 说明设备很宽，我们就把设备的高度除以 16：9 得到我们的有效宽度
- 如果设备的宽高比是小于 16 : 9 说明很窄，有效宽度就是设备的宽度
- Wp 为页面有效宽度， Hp 为页面有效高度
- 页面左右居中，上下居中，四周留白
- 然后在 head 里用 JS 设置 1 rem = Wp / 100，将 wp 的百分之一作为一个 rem
如何适配一个div
像素不能使用
- rem
假设一个 div 在设计稿中的宽度是 x, 那么它在大屏中的宽度是 y , x 和 y 的关系显然就是等比放大
于是我们就有这么一个关系：
一个 div 在页面中的尺寸除以页面的宽度等于它在设计中的尺寸除以它在设计搞的宽度，之前说过 1 rem = Wp / 100 ，反过来 Wp = 100 X rem
- 假设某 div 在设计稿中长 100px，设计稿宽度 1920px
- 那么该 div 在页面中长为 100 / 1920 X 100rem
- 最后可以写一个 px() 函数来计算 100px 对应的 rem