移动端适配方案

移动端适配方案主要分为两类，一是通过元素响应式布局完成，二是高清像素级适配。

先说说响应式布局适配：

响应式布局适配方式很多，基本通过css来实现，主要有传统的媒体查询，以及弹性盒子，网格布局。

媒体查询

媒体查询在css2中就非常常用了，其可用于检测视窗高宽，设备高宽，设备朝向，分辨率，而我们可通过它的这些特性来设置元素样式，从而达到响应式布局。

多媒体查询语法：

/*
* mediatype（all:所有设备。print:打印设备。screen:电脑，手机等。speech:阅读器）
* 条件：not：排除其后的这个设备。only:指定其后的这个设备。all:所有设备
*/
@media not|only mediatype(设备类型) and (expressions){
    #id{
        width:0px;
    }
}

弹性盒子

基于css3中disply新增的flex属性，flex可用于创建弹性盒子，通过弹性盒子可设置各种自适应布局。

网格布局

网格布局以前可通过table表格来实现，现在可使用display的grid属性及其配置来实现。

高清像素级适配原理主要是css新增rem单位，rem主要通过页面根元素的字体大小来计算值。所以我们通过设备大小，动态设置根元素的字体大小，来使元素的大小发生变化进行自适应。而我们在计算这个根元素字体大小时，为了使各种状态下，页面展示都与设计稿相似，所以需要基于设备DPR的值来计算。

DPR = 物理像素值/设备独立像素（css像素）

例如当设计稿总宽度为375px,我们可以设置根元素的字体大小为window.document.documentElement.clientWidth/3.75(此处clientWidth为页面根元素即文档区域宽度)，当实际设备的宽度也为375px时，1rem，就等于100px,这样有利于我们口算从设计稿上得到的每一个px单位数值，同时为了让rem随文档区域变化，我们还要给window设置一个resize的监听事件，当窗口大小变化，重新计算rem。

看到这里可能会有点疑惑，我们根据设计稿设置的大小，怎么就会响应式了呢，因为我们根据设计稿上的px数值计算的rem值已经不是一个固定px了，它变成了一个会根据设备大小变化的比例值，这个比例不会发生变化，始终基于设计稿呈现，而在设备上实际渲染的像素值却会随着设备大小变化而变化，但是不管再怎么变它依旧按照设计稿的样式来。

工程化项目中我们甚至还会用到postcss-pxtorem，在我们打包时动态帮我们计算rem，都不需要自己设置。

这种设置html字体大小的方式，就有多种了，可以直接用js来设置，也可以根据媒体查询来设置，也可以直接设置为多少vw，都是可以动态改变rem。

而基于上面设置rem的插件flexible，随着vw的兼容性增强，新的vw适配方案成了更好的选择，vw使用也可通过插件postcss-px-to-viewport来完成，其会自动帮我们将px计算为vw.

高清适配还需要设置viewport,即在meta标签中设置页面缩放等属性，具体如下：

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

meta标签元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。这里设置viewport,内容定义如下：

width: 设置layout viewport的宽度，为一个正整数，或字符串width-device; initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale: 允许用户的最大缩放值，为一个数字，可以带小数 height: 设置layout viewport的高度，这个属性对我们并不重要，很少使用 user-scalable: 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。安卓中支持，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

设置缩放比例为1，并且禁止缩放，是为了让文档宽度与视窗宽度比例始终为1，否则当移动端浏览器缩放时，会导致布局乱掉。

Lirx-Xin / LirxdeBlog