一、rem布局
rem布局解决了一个问题,让设计稿在不同设备上进行等比缩放。
1 | //媒体查询 |
1 | // onload事件、onresize事件监听 |
如果页面的宽度超过了640px,那么页面中html
的font-size
恒为100px
,否则,页面中html的font-size
的大小为: 100 \* (当前页面宽度 / 640)
注:如果字体大小也等比缩放,在大屏手机上会有一种老人机的视觉
二、vw布局
方案一
最简单的方案就是所有的布局元素及属性都用VW来做单位,对应关系是:
设计稿 750px——>100vw
那我们书写时计算:(x/750)*100vw
1 | $vw_base: 750; |
方案二
沿用rem布局方案,所有的布局元素及属性都用rem做单位,用vw单位给html设置font-size形成“流单位”,这样就不再需要JS来动态计算根元素字体大小。
如果以前你习惯了约定750px设计稿的根元素字体大小为100px的话,你可以直接设置:
1 | html{ |