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 数值

源码预览打开窗口

查看源码

网易移动端案例

源码预览打开窗口

查看源码