em 参照本身元素的 font-size
rem 参照 html 根元素 的 font-size
1. rem 适配 （同一元素，在不同设备上，效果一样）
适用情况： 当页面大于 独立像素375 时，或者页面元素很多时
- 原理
页面中的元素，统一 单位 rem（字体使用 px 而不使用 rem）
根元素字体大小 设置成 整个屏幕的宽（1 rem = 375px），然后元素的 css 像素根据占据屏宽，使用 rem
-
// 适配 (手写 面试题) (function(){ /* 1. 创建 style 标签 */ var styleNode = document.createElement("style"); /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */ styleNode.innerHTML = "html {"+ "font-size:"+width/16+"px !important"+ "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 标签追加到 head 标签里 */ document.head.appendChild(styleNode); }());
缺点： 需换算元素占屏幕的 rem
2. viewport 适配
适用情况： 当 ui 设计图 小于 独立像素 375时。 避免换算，直接使用 css 像素单位 px
缺点： 图片可能失真； 打破完美布局视口。
- 原理：
让 布局视口 等于 设计图纸的 width
- 方案1
（直接 让meta 标签中 content 的 布局视口 width=320px 安卓不支持）
- 方案2
- （放大操作 initial-scale=375/320，布局视口变小）
-
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <script type="text/javascript"> var clientWidth = document.documentElement.clientWidth; var targetWidth = 320; var scale = clientWidth/targetWidth; var metaNode = document.querySelector("meta[name='viewport']"); metaNode.content = "initial-scale="+scale+ ", user-scalable=no"; </script>
3. 百分比适配
zepto 移动端实战项目。
适用情况： 页面元素少。
4. 媒体选择器（响应式布局）
不同屏幕，自适应呈现出不同的布局。
5. 具体像素值
适用情况： 当 ui 设计图 未标明 宽度，以及元素的具体位置时。
关键点：
- 结合 媒体选择器 在不同情况下，使用 2x 图 和 3x 图（dpr=2时使用2x图，dpr=3时使用3x图）
- 元素不可直接使用 ui 设计图 的标注px，必须问清楚 dpr 是多少，然后算出具体的 css 像素
- css 像素 = 物理像素 / dpr = 位图像素/dpr = 设计图px/dpr
- css 像素 = 128/2 = 64 比如 128px*128px 的图片的 css 像素应该是 64 px