动态 REM 方案 (移动端方案)

rem是什么

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

动态 REM 方案

1.浏览器禁止 980 像素的缩放（meta:vp 阻止缩放）
2.设置 html {font-size: 页面宽度 / 10 px}
3.10 rem == 页面宽度
4.所有单位都用 rem == 所有长度都以页面宽度为基准
5.页面可以兼容任何手机屏幕

1px 问题

1.在普通屏幕

CSS 1px == 设备的 1px

2.在 Retina 设备

CSS 1px == 设备的 2px
border-width == 设备的 1px
border-width: 0.5px == 设备的 1px （兼容性有问题）

解决方法

页面整体缩放 50% <meta initial-scale=0.5> border-width: 1px == 设备的 1px

副作用所有的 div 都变为原来的 50%

所有长度都以 rem 为基准，让 rem 变为原来的 2倍

1.获取设备像素比（1/2/3）

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

2.initial scale = 1/像素比

3.让 rem 变为 rem * 像素比

4.border-top: 1px solid red;