Web移动端常规布局和适配方式

前言

如果你在移动端布局里还在使用类似下面这种viewport，写页面的时候各种百分比，稍稍一改动全部百分比都要调整，做个活动页，兼容各种尺寸的屏幕简直是要命的。

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

这其实是一种很古老的写法，很多门户网站的首页是如此布局的。但是在很多场景下，这很蛋疼。

移动端布局流派

1.完美视口(viewport), 就是如上，视口始终是设备的宽度
2.固定body宽度，viewport缩放
3.body用rem做宽度，viewport缩放

完美视口

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

完美视口的好处在于简单，但是要想完美实现设计稿并适配，基本是不可能的。
虽然以百分比来定位，但因为不同设备的宽度和高度并不相同，尤其是活动页，
经常性都是错位的。

固定body宽度，viewport缩放

这样设置以后，我们可以以固定的宽度来写布局，就相当于在一块固定大小（一般640px || 750px）的画布上画画, 画完以后直接等比缩。

<meta name="viewport" content="width=640">

body{
    width: 640px;
    margin: 0 auto;
}

＊注意body的宽度要与viewpoint中的相同

动态设置viewpoint的 initial-scale，minimum-scale， maximum-scale，来实现缩放，让布局内容在屏幕中完美展现。只需粘贴如下代码到head中，越早出现越好，但必须设置在<meta name="viewport" content="width=640">的后面.

(function fixScreen (viewportWidth){
    var metaEl = document.querySelector('meta[name="viewport"]');
    var width  = viewportWidth,
        iw = window.innerWidth || width,
        ow = window.outerWidth || iw,
        sw = window.screen.width || iw,
        saw = window.screen.availWidth || iw,
        ih = window.innerHeight || width,
        oh = window.outerHeight || ih,
        ish = window.screen.height || ih,
        sah = window.screen.availHeight || ih,
        w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
        scale = w / width;
    if ( scale < 1 ) {
        metaEl.content = 'width='+ viewportWidth +',' + fillScale(scale);
    }
    function fillScale(scale) {
        return 'initial-scale=' + scale + ',maximum-scale=' + scale +
        ',minimum-scale=' + scale + ',user-scalable=no';
    }
})(640)

body宽度和布局用rem做单位，viewport缩放

这种布局方式相比于第二种，设置更麻烦一点，但是能提供rem和px两种单位，使用px这种单位
最好借助Sass混合宏，以适应iPhone上dsp为2或者3的情况。而且在iPhone下能
超高清，因为页面中css中的px正好对应一个设备物理像素。

@mixin font-dpr($font-size){
font-size: $font-size;

[data-dpr="2"] & {
    font-size: $font-size * 2;
}

[data-dpr="3"] & {
    font-size: $font-size * 3;
}

}

pxToRem
```sass
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}