移动端适配

1. 媒体查询（廉颇老矣，尚能饭）

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

能针对优化，但是屏幕尺寸太多，导致一些屏幕看起来不是那么合适，有点生硬。内容的弹性自适应只会在临界点的时候，突然变化。

2. 百分比（廉颇老矣，尚能饭）

确定高度，宽度使用百分比，这样屏幕宽度变大的话，内容宽度也会随之变大。能适应一般的情况。

3. flex弹性布局

div {
    display: flex;
}

4. rem + viewport（比较成熟的方案）

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

width 网页内容宽度等于设备宽度，把理想的视窗宽度设置为设备宽度

initial-scale 初始缩放比例，能起到 width=device-width 的作用

minimum-sacle 最小缩放比例

maximum-scale 最大缩放比例

user-scaleable 用户能否进行缩放操作，yes/no

dpr（device pixel ratio）[设备像素比 = 设备像素 / 设备独立像素]

一个物理(设备)像素是显示器（手机屏幕）上最小的物理显示单元，在OS的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素（也叫目睹无关像素），也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。

像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

dpr = 1的时候，css的1个像素点，对应一个物理像素点。

dpr = 2的时候，css的1个像素点，对应4个物理像素点，为什么是4个呢，因为宽对应是2倍，高也对应是2倍。

dpr = 3，css的1个像素点，对应9个像素点。

dpr > 1，会带来图片会模糊的问题，原理可以想象，一瓶蓝墨水，如果混合在4倍的容器里面，颜色是不是会比较浅。1px边框也是个问题，这个可以用伪元素 + transform ，scale:0.5 来解决。

对于rem + viewport方案，html的font-szie大小，一般为窗口大小的0.1倍，或者设计稿的0.1倍，然后动态设置viewport；

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

布局的时候，各元素css尺寸 = 设计稿标注尺寸 / 设计稿横向分辨率 / 10；

font-size可能需要额外的媒体查询，并且font-size不用rem；

有最大临界点，比如物理分辨率大于1080，可以访问电脑端网页。

搭配less或者sass会更好用

//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
    .px2rem(height, 240);
}
//less翻译结果：
.container {
    height: 3.2rem;
}

其实可以参考阿里的 lib-flexible

5. vw, vh移动端设配新贵（设备版本 > android 4.3）

1vw表示1%的屏幕宽度，同理1vh也表示1%的屏幕高度。

可以通过caniuse网站查询vw适配情况，android版本 > 4.4的都支持，ios支持比较好。

a. 所有布局都使用vw，vh来做单位

设计稿 750px === 100vw

$vw_base: 750; 
@function vw($px) {
    @return ($px / 750) * 100vw;
}

b. 沿用rem单位，vw只用于html的font-size上面，这样可以避免使用js来动态计算根元素字体大小。用sass计算

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相当于20vw
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

这部分代码参考了利用视口单位实现适配布局 | Aotu.io「凹凸实验室」

如果是用calc来计算，比如

html{
     font-size: calc(16px + 2 * (100vw - 375px) / 225);
}

要注意，Safari不支持这样，不过它支持将字体大小相对于10px的百分比的计算，如

html{
     font-size: calc(100% + 2 * (100vw - 375px) / 225);
}

此处可查看基于vw等viewport视区单位配合rem响应式排版和布局获得更详细的信息。

移动端适配