移动端的三种适配

移动端的三种适配

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

1.rem适配

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>

2.viewport适配

如果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>

3.1px适配

这里的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>