移动端适配

一、移动端适配的必要性
一般设计稿都按照375的尺寸设计。但是，现在每个手机都有不同的物理分辨率，导致每台设备的逻辑分辨率不尽相同，从而使375的设计稿还原基本是不可能的。（因为一个左右布局，如果左边写死，右边自适应，每个设备的右边所展示的内容大小就不尽相同，这就表现出来移动端适配的必要性）

二、基本概念
接下来我们来一起看几个概念：
2.1 屏幕尺寸
是以屏幕对角线的长度来计量的，计量单位为英寸。
2.2 像素
从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。他指显示屏的画面上表示出来的最小单位，不是图画上的最小单位。单位面积内的像素越多，图像的效果就越好。彩色电视图像是由成千个像素点所组成的，而且每个像素都是由红绿蓝三种颜色并排组成的。（注意：每个像素的大小是不固定的，他是根据设备的分辨率决定的）
2.3 分辨率
屏幕分辨率是指丛横向上的像素点数，单位是px。
2.4 设备独立像素
用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素（简称DIP或DP）。
如果一个没有使用视网膜屏幕技术的手机，显示一个宽度为300个像素的列表，它会用300个物理像素去渲染它，然而使用视网膜屏幕技术的手机实际上会用600个物理像素去渲染它。
比如iphoneX显示的尺寸是375*812，实际iphone X的分辨率会比这高很多，这里显示的就是设备独立像素。
2.5 设备像素比
设备像素比简称dpr，即物理像素和设备独立像素的比值。
在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。
在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }
在React Native中，我们也可以使用PixelRatio.get()来获取DPR。
2.6 视口
视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分，一般所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。

三、移动端适配方案
尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似，但这并不能保证它们显示完全一致，我们需要一种方案来让设计稿得到更完美的适配。

3.1 flexible方案
flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，页面上统一使用rem来布局。
其核心代码：

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

rem 是相对于html节点的font-size来做计算的。
通过设置document.documentElement.style.fontSize就可以统一整个页面的布局标准。

上面的代码中，将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。

这时，我们只需要将UI出的图转换为rem即可。

以iPhone6为例：布局视口为375px，则1rem = 37.5px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 37.5 = 2rem。

当然，每个布局都要计算非常繁琐，我们可以借助PostCSS的px2rem插件来帮助我们完成这个过程。
下面的代码可以保证在页面大小变化时，布局可以自适应，当触发了window的resize和pageShow事件之后自动调整html的fontSize大小。

  // reset rem unit on page resize
window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
})

由于viewport单位得到众多浏览器的兼容，上面这种方案现在已经被官方弃用：
lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。
下面我们来看看现在最流行的vh、vw方案。

3.2 vh、vw方案
vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。
● vw(Viewport’s width)：1vw等于视觉视口的1%
● vh(Viewport’s height) : 1vh 为视觉视口高度的1%
● vmin : vw 和 vh 中的较小值
● vmax : 选取 vw 和 vh 中的较大值
如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。
这里的比例关系我们也不用自己换算，我们可以使用PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据UI给的设计图写px单位即可。
vm缺陷：
● px转换成vw不一定能完全整除，因此有一定的像素差。
● 比如当容器使用vw，margin采用px时候，很容易造成整个宽度超过100vw，从而影响布局效果。当然我们也可以避免的，例如使用padding代替margin，结合calc()函数使用等等…