移动端的三种适配

适配的目的：实现等比效果！（如果屏幕宽度是320px，元素宽度是160px，想要在不同屏幕中都占据一半的大小，此时我们就需要适配）。
默认情况下不等比：不加meta标签时是等比的，加上meta标签后就不等比了。

rem适配的本质：rem参照根元素字体，不管视图多大，在不同机型上，1rem等于视图的宽度，所以，这时候根元素的font-size改成了布局视口大小了。

<script type = "text/javascript">
    (function(){
        var width = document.documentElement.clientWidth;
        var styleN = document.createElement("style");
        styleN.innerHTML = "html{font-size:" + width + "px;}";
        document.head.appendChild(styleN);
    })();
</script>

如果UI给的设计图纸是320px的，那么这个尺寸覆盖不了整个屏幕（苹果6的设备独立像素时375），第一种解决方案是我们可以不写完美的meta标签：

<script type = "text/javascript">
    var width = screen.width;
    var targetW = 320;
    //缩放比例
    var scale = width/targetW;
    var metaN = document.querySelector("meta");
    metaN.setAttribute("name","viewport");
    metaN.setAttribute("content","initial-scale:" + scale);
    document.head.appendChild(metaN);
</script>

但是直接获取屏幕的宽度我们并常写（screen.width），第二组解决方案则是完全的meta标签可以写上，我们获取meta的DOM，设置content属性：

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

<script type = "text/javascript">
    var width = document.documentElement.clientWidth;
    var targetW = 320;
    var scale = width/targetW;
    var metaN = document.querySelector("meta[name="viewport"]");
    metaN.setAttribute("content","initial-scale" + width);
</script>

这里的1px指的是物理像素。如果我们给一个元素设置一个1px的边框，那么它对应的是2个物理像素。所以我们如果要实现1物理像素，就得将元素边框设置为0.5px，但通过测试并没有达到我们想要的结果。
这时候我们可以通过meta标签中的initial-scale属性设置缩小效果，写上完美的meta标签后，我们可以动态地修改它。

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

<script type = "text/javascript">
    var dpr = window.devicePixelRatio;
    var scale = 1/dpr;
    var width = document.documentElement.clientWidth/16 * dpr;
    var metaN = document.querySelector(meta[name="viewport"]);
    metaN.setAttribute("content","initial-scale" + scale);

    var styleN = document.createElement("style");
    styleN.innerHTML = "html{font-size:" + width "px;}"
    document.head.appendChild(styleN);
</script>

尽管我们实现了1px适配，但是整个页面我们做了缩小的处理，所以其中的元素都会缩小，我们可以将边框的单位用px表示，而元素的单位用rem表示：

<div class = "box"></div>
<style type = "text/css">
.box{
    width:8rem;
    height:8rem;
    border:1px solid;
}
</style>