关于移动端适配

关于移动端适配，网上已经有不少文章了，这篇文章主要是整理总结一下本身的理解，若有问题，欢迎指出。

1、概念

在了解移动端适配时，有几个概念常常出如今移动端适配文章中，这个须要知道的。

一、设备像素（device pixels）

设备像素能够理解为设备屏幕的大小，它是屏幕的属性而非浏览器的，不管用户是缩小或放大网页，它的大小始终不会改变，能够经过screen.width/height获取。

二、CSS像素（CSS pixels）

CSS像素是咱们开发更关注的一个抽象的概念，它是一个相对的设备像素单位。

其实能够理解为咱们常说的手机分辨率。

在标准的设备上，设备像素与CSS像素的比值（设备像素比）为1:1，表示1pxCSS像素对应1px设备像素；在Retina屏上，当设备像素比为2时，1pxCSS像素对应4px(2*2)设备像素；当设备像素比为3时，1pxCSS像素对应9px(3*3)设备像素。

默认状况下，CSS像素占比取决于设备像素比，但当页面缩小放大时，会影响CSS像素占的空间；假设当前1个CSS像素等于1个物理像素：

浏览器此时的宽度为800px，页面时同时有一个400px宽的块级元素容器，此时块状容器占页面的一半。

若是咱们放大页面，放大为200%，即原来的两倍，此时块状容器则横向占满了整个浏览器。

咱们并无跳转浏览器窗口的大小，也没有改变块状元素的CSS宽度，但它看起来却变大了一倍，这是由于咱们把CSS像素方法为了原来的两倍。此时的1个CSS像素等于了2个设备像素

三、设备独立像素DIP（Device independent pixels）

设备独立像素，也称逻辑像素，它其实就是CSS像素，即：

CSS像素 = 设备独立像素 = 逻辑像素

四、设备像素比DPR（Device pixels ratio）

设备像素比（dpr）是指在移动开发中1个CSS像素占用多少设备像素，它描述的是物理像素与CSS像素的初始比值关系，如2表明1个CSS像素用2 * 2个设备像素来绘制。
设备像素比能够经过window.devicePixelRatio获取

五、两个视口：布局视口（Layout Viewport）与可视视口（Visual Viewport）

George Cummins explains the basic concept besthereat Stack Overflow:

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

上面这段话解析得很是清晰，将内容视为一张大图，布局视口是包含整个大图得内容，而可视视口只是用户能够看到得一部分，在手机上，它的大小就是屏幕的大小。
布局视口能够经过document.documentElement.clientWidth与-Height获取
可视视口能够经过window.innerWidth/Height获取

五、理想视口（Ideal Viewport）

除了布局视口、可视视口，还有第三种视口：理想视口（ideal viewport），它的出现是由于在移动端，默认视口是布局视口，它可能比可视视口大，这样页面就会出现滚动条，用户阅读的时候可能须要缩放。而理想视口是指完美适配移动端设备，不须要用户缩放和横向滚动条就能正常的查看网站的全部内容，且不管在什么设备上显示的文字的大小是合适，也包括图片。
理想视口其实就是等于可视视口，即设备屏幕大小。

六、媒体查询

width/height是用布局视口做为参考，以CSS像素衡量
device-width/height是用设备屏幕做为参考，以设备像素衡量

在开发移动端项目时，常常会在html头部见到这么一个标签：

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

它主要是将当前的viewport设置为屏幕的大小，同时不容许用户缩放。它一共有6个属性：

属性	解释
width	设置布局视口的宽度，能够设置为device-width表示设备宽度
initial-scale	设置页面初始缩放值与布局视口宽度
minimum-scale	设置用户可缩放的最小值
maximum-scale	设置用户可缩放的最大值
height	设置布局视口的高度，不过基本上不会须要用到
user-scalable	设置是否容许用户缩放，no(不容许)／yes(容许)

单独设置width=device-width或initial-scale=1均可以将布局视口设置等于屏幕大小，即理想视口，设置初始缩放能达到一样的效果是由于它是相对于理想视口缩放的；虽然单独使用它们任何一个均可以达到一样的效果，但这二者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，统统以竖屏的ideal viewport宽度为准。因此，最完美的写法应该是，二者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。

若是同时设置这两个属性而width等于其余值，好比400时，initial-scale=1，这种状况浏览器会取值比较大的一个。

关于缩放与initial-scale的初始值（有些兼容问题，细节可查看参考连接3：8.4.1），这里只是做为了解，缩放是相对于理想视口缩放的，initial-scale=2时其实是将1px变得跟原来的2px的长度同样了，因此若是设备的宽度为320px，设置了initial-scale=2不会变成640px，而是160px。能够获得如下公式：

visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度

因为各浏览器默认的layout viewport宽度通常都是980、102四、800等等，没有一开始就是ideal viewport的宽度的，因此initial-scale的默认值确定不是1。

2、移动端适配：rem

rem是相对于html的font-size的单位。
咱们使用rem适配一般有以下几个步骤：
一、写样式都是按照设计稿去写的，一般设计稿的宽度是750px，此时若咱们设置基数为100（即html的font-size为100px），这时1rem表示100px；
二、而在咱们的页面中，咱们一般会经过视口的宽度去设置html的font-size，此时若咱们设置为50px，这时1rem表示50px
100px变50px，很好理解，这就已经实现将750px的设计稿缩放在宽度为375px设备上了；当咱们针对不一样设备的不一样宽度去设置html的font-size时，就很好的适配了移动端。

总结，经过viewport的meta标签将可视视口的宽度设置为设备像素的宽度即屏幕大小，保证页面无横向滚动条，利用rem，将宽为750px的设计稿缩放在不一样宽度的设备上。

参考连接：
一、https://www.quirksmode.org/mo...
二、https://www.quirksmode.org/mo...
三、https://github.com/jawil/blog...