算法
- (设备宽度w/设备高度h) > 16/9 时，页面有效宽度W = (设备高度h * 16/9)
- (设备宽度w/设备高度h) ≤ 16/9 时，页面有效宽度W = 设备宽度w
- 页面有效高度H = 页面有效宽度W ÷ 16/9
页面左右居中，上下居中，四周留白即可。 然后在 head 里用 JS 设置 1rem = 页面有效宽度W / 100
示例
- 假设设计稿中一个 div 宽度为 x ，在页面中宽度为 y
- 用 rem
- 由 Size 页面/ W 页面 = Size 设计/ W 设计， W 页面 = 100 * rem
- 得出 Size 页面 = (Size 设计 / W 设计) * 100rem
- 假设某 div 在设计稿中宽度为 100px，设计稿宽度 1920px，那么该 div 在页面中长就是 100/1920 * 100 *rem。
- 可以写一个 px() 函数来计算 100px 对应的 rem
先看看大屏适配如何操作
- 不要忘了给 root 一个
margit: 0 auton;左右居中 - 不要忘了通过 JS 给 root 上下居中（上图第二个红框最后一行代码，把空余部分取一半给 margin-top 即可）
用 rem 代替像素
- 示例我设计稿宽度是 2420px ， div 宽度为 380px 的情况下
- 在 _helper.scss 声明一个 function，接受一个像素参数，这里设为 n
@function px($n){
@return $n / 2420 * 100rem
}
- 这样只要任何人 import 了 helper 就可以使用了，使用方法
px(设计稿像素)
