saber酱的抱枕

努力变强

02/26
04:03
学习

移动端使用 vw + rem 自适应布局

使用 rem 布局时,最关键的地方在于动态计算 rem 的值。比如设计稿 640px,我们预设 rem 为 100px。rem 是设计宽度的 15.625%(100 / 640 = 0.15625)。当设备宽度为 320px 的时候,rem 值应该按比例变成 50px。

以前当设备宽度变化时,我们要根据这个比例重新计算 rem 应该是多少,增加了额外的工作量。如果我们可以直接告诉浏览器,我的 rem 就是这个比例(页面宽度的 15.625%),你聪明一点自己算吧!这样不就省事了吗?没错,这就是 vw 单位。

vw 是视图宽度,1vw 相当于 1% 视图宽度(想象把页面宽度分成了 100 份)。所以上面的比例 15.625%,用 vw 就是 15.625vw。当页面宽度变大或者变小,rem 总是页面宽度的 15.625%。

html{
    font-size: 15.625vw;  // 要理解 vw 是个百分比单位
}
// 下面照常使用 rem 做单位

我们这么写就可以了,浏览器会自动计算出来 rem 的值,非常的方便。

如果你的设计稿和预设 rem 不是 640px、100px,那么只需要依据你的比例,修改 vw 值即可。
Read More →

移动端使用 vw + rem 自适应布局