　　编写移动端页面时，为了容纳为桌面浏览器设计的页面，默认的布局视口大小远远大于屏幕宽度（默认布局视口大小一般为980px），此时屏幕会缩放，导致字体很小，不适合用户浏览。为了得到更好的使用效果，我们会使用理想视口，使布局视口的大小等于设备独立像素的值，这样用户进入页面时，则无需缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

　　但是，由于每种手机分辨率以及像素比不同，设置理想视口后，会导致同一页面在不同手机上的布局视口大小不同，此时，若直接使用 px 为单位进行页面布局，在不同手机打开页面容易发生布局混乱。
　　针对这一问题，我们可以使用移动端适配来解决。

rem适配

使用 rem 为单位进行布局时，1rem 等同于 html 节点中 font-size 的大小，默认为 16px。

如下代码中，为 box 设置宽度为 10rem，则 box 的宽度会被计算为 160px。

1
2
3

#box{
    width: 10rem;
}

rem适配的原理

　　将 html 元素的 font-size 值设置为与设备独立像素（device-width）相关的值，如将 font-size 的大小设置为 device-width，则 1rem 的大小即为 device-width 的值，布局时使用 rem 为单位进行布局。
　　如将一个 div 的宽度设置为 0.5rem，则无论使用何种手机打开，该 div 的宽度都将是该手机设备独立像素的值的一半。而不会发生布局混乱的问题。

通常情况下，将 1rem 的值设置为 device-width / 16 或 device-width / 10。

rem适配示例代码

(function () {
    // 设置理想视口后，布局视口的宽度即为设备独立像素的值
    var width = document.documentElement.clientWidth;
    var styleH = document.createElement('style');
    // 将 1rem 设置为 设备独立像素的值的 1/16
    styleH.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
    document.head.appendChild(styleH);
})();

viewport适配

viewport适配原理

　　通过动态的改变屏幕的缩放比例（meta 标签中的 initial-scale 的值），使所有手机的布局视口的大小固定，此时布局时，只要使用 CSS 的像素值，不同手机将展示出相同的效果。
　　缩放比例大小为设备独立像素的值与目标布局大小之比。

viewport适配示例代码

(function () {
    var width = document.documentElement.clientWidth;
    var targetwidth = 320; // 目标布局视口大小
    var scale = width / targetwidth;
    var meta = document.querySelector('meta[name="viewport"]');
    meta.setAttribute('content','initial-scale=' + scale);
})();

1物理像素适配

　　使用 1 物理像素适配的目的，是为了在设置边框时，能够设置边框的大小为 1 物理像素的大小。但是，由于现在手机屏幕的像素比普遍大于 1，1CSS 像素的大小通常大于 1物理像素的大小，导致我们使用CSS单位时，无法设置边框宽度为 1物理像素。

注意：边框宽度无法设置为小数值。

　　为了解决这个问题，可以使用 1物理像素适配。

1物理像素适配的原理

　　1 物理像素适配结合了 rem 适配和 viewport 适配的概念。通过动态的改变屏幕的缩放比例，使得 1CSS 像素的大小，等于 1物理像素的大小，此时布局视口的大小等于屏幕分辨率，然后设置 html 标签的 font-size 的值为屏幕分辨率的值，即使用 rem 适配。这样，可以让所有的布局元素使用 rem 为单位进行布局，边框使用 px 为单位。

initial-scale 的值等于 1/dpr(屏幕像素比)，则 1CSS像素等于 1物理像素。

1物理像素适配的示例代码

var scale = 1 / window.devicePixelRatio;
var meta = document.querySelector('meta[name="viewport"]');
meta.setAttribute('content','initial-scale=' + scale);

var width = document.documentElement.clientWidth / 16;
var styleW = document.createElement('style');
styleW.innerHTML = 'html{font-size: '+ width +'px;}';
document.head.appendChild(styleW);

rem适配和viewport适配对比

rem适配

优点
1. 可以使用理想标签
2. 可以实现等比缩放
缺点
使用 rem 单位需要进行换算

viewport适配

优点
避免复杂的计算，可以直接使用 UI 的标准像素值
缺点
1. 不能使用理想视口
2. 由于进行了缩放，图片失真情况严重