3-2 移动端适配解决方案，rem 和 em 的区别

移动端适配解决方案

1. viewport（scale=1/dpr）

device-width 等于理想视口的宽度，设置 width=device-width 就相当于让布局视口等于理想视口。

initial-scale = 理想视口宽度 / 视觉视口宽度，设置 initial-scale=1 就相当于让视觉视口等于理想视口。

这时，1 个 CSS 像素就等于 1 个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似

2. rem 为相对 HTML 根元素的大小，除了 IE8 及更早的版本外，其他浏览器都支持 rem。

3. vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份

4. 移动端适配整体流程
   在 head 设置 width=device-width 的 viewport‘
   在 css 中使用 px
   在适当的场景使用 flex 布局，或者配合 vw 进行自适应

rem 和 em 的区别

rem 相对于根元素的字体大小
em 相对于，当前元素的字体大小