rem 适配布局
首先看个例子,学习下概念
px
绝对大小单位,大小固定em
相对大小单位,相对与元素font-size
大小,如果 font-size 也是 em 单位,则相对于父元素的 font-size 大小rem
相对根元素大小单位,也就是 html 根元素
动态计算 font-size
根元素
font-size
建议使用100px
作为计算单位
计算过程
- 以 iPhone 6 为例像素为 375px,1vw = 3.75px,得到 100px = 26.666667vw,所以 html 元素可以设置
font-size: 26.666667vw;
- 为了避免 html 上的 font-size 对页面造成影响,需要给 body 元素重置
font-size: 0.16rem
;
测量 rem 数值及插件使用
- 一般使用 PS 工具测量设计稿得到的是 px 物理像素,得到 css 逻辑像素需要除以 2 才是真正的值
- 使用插件自动转换计算,比如 vscode 的
px to rem 插件
,快捷键Alt+z
- 利用蓝湖,PxCook 可以直接获取 rem 数值