移动端适配-rem适配rem翻译过来就是：root em。 em是相对于自身文字大小计算的。所以说，不同的文字大小设置，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 2 天，点击查看活动详情

前言

上一篇中提到了viewport设置：移动端适配-viewport设置

在说页面适配之前再来巩固加深下：

1、viewport 常用设置
width=device-width：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例，默认值是yes，可选值no

如设置缩小2倍，设备尺寸不变，这里的2 不是视口大小缩小2倍，而是里面所有内容缩小2倍，那么在可视区域里可见的内容就增大2倍，就相当于视口大小增加了2倍。

2、设备像素比 dpr
通过window.devicePixelRatio获取他的值。
dpr = 物理像素/css像素
如果 dpr = n, 那么 1px 就会被放大 n 倍

以iPhone6为例：在谷歌浏览器模拟调试移动端看到的iPhone6的屏幕宽度为375，指的是css像素（设备独立像素或者逻辑像素），而750px指的是手机上的真实存在的物理像素，例如，iPhnoe6屏幕物理像素点750 * 1334。这里也就是手机系统设置中的屏幕分辨率。

iPhnoe6 的像素比是2，假设像素比，1css像素 = 1物理像素，那么在iPhone6上显示的内容将很小。所以为了解决这个问题，将css像素根据dpr放大。
1px, dpr = 2时，1px 放大2 倍，占 2*2 个物理像素点；

所以根据dpr动态的设置viewport缩放，以保证css像素 = 物理像素

// 默认width=device-width
(function () {
    var metaEl = document.createElement('meta');
    var scale = devicePixelRatio;
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + (1 / scale) + ', maximum-scale=' + (1 / scale) + ', minimum-scale=' + (1 / scale) + ', user-scalable=no');
    document.documentElement.firstElementChild.appendChild(metaEl);
})();

页面适配方案

1、百分比

适合适配宽度，其他设置很局限

2、rem

rem翻译过来就是：root em。
em是相对于自身文字大小计算的。所以说，不同的文字大小设置，其em计算标准不同，这就造成像素转换的成本较高。

后来有了rem,rem是根据根节点html的字体大小进行计算。

在开发中，设计会根据标准出一套ui图：
例如：iPhnoe6分辨率750 * 1334, dpr=2
动态设置根节点的字体大小：

    let h = document.documentElement;
    h.style.fontSize = window.innerWidth/750 *10 + "px";
    window.onresize = ()=>{
        h.style.fontSize = window.innerWidth/750 * 10 + "px";
    }

根节点的字体大小设置完成后，量出的按照设计图的尺寸（px） / 10,就是rem大小了。
上面window.innerWidth/750 除以 750，是因为设计图的标准是宽750，也就是说设计图是按多少设计的，这里就除以多少，目的为了方便计算。

移动端适配-rem适配

前言

页面适配方案

1、 百分比

2、rem

1、百分比