关于移动端适配，网上已经有很多文章了，这篇文章主要是整理总结一下自己的理解，如有问题，欢迎指出。
一、概念
在了解移动端适配时，有几个概念经常出现在移动端适配文章中，这个需要知道的。
1、设备像素（device pixels）
设备像素可以理解为设备屏幕的大小，它是屏幕的属性而非浏览器的，无论用户是缩小或放大网页，它的大小始终不会改变，可以通过screen.width/height获取。
2、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个设备像素
3、设备独立像素DIP（Device independent pixels）
设备独立像素，也称逻辑像素，它其实就是CSS像素，即：
CSS像素 = 设备独立像素 = 逻辑像素
4、设备像素比DPR（Device pixels ratio）
设备像素比（dpr）是指在移动开发中1个CSS像素占用多少设备像素，它描述的是物理像素与CSS像素的初始比值关系，如2代表1个CSS像素用2 * 2个设备像素来绘制。
设备像素比可以通过window.devicePixelRatio获取
5、两个视口：布局视口（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获取
5、理想视口（Ideal Viewport）
除了布局视口、可视视口，还有第三种视口：理想视口（ideal viewport），它的出现是因为在移动端，默认视口是布局视口，它可能比可视视口大，这样页面就会出现滚动条，用户阅读的时候可能需要缩放。而理想视口是指完美适配移动端设备，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，且无论在什么设备上显示的文字的大小是合适，也包括图片。
理想视口其实就是等于可视视口，即设备屏幕大小。
6、媒体查询
width/height是用布局视口作为参考，以CSS像素衡量device-width/height是用设备屏幕作为参考，以设备像素衡量
在开发移动端项目时，经常会在html头部见到这么一个标签：
它主要是将当前的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、1024、800等等，没有一开始就是ideal viewport的宽度的，所以initial-scale的默认值肯定不是1。
二、移动端适配：rem
rem是相对于html的font-size的单位。
我们使用rem适配通常有如下几个步骤：
1、写样式都是按照设计稿去写的，通常设计稿的宽度是750px，此时若我们设置基数为100（即html的font-size为100px），这时1rem表示100px；
2、而在我们的页面中，我们通常会通过视口的宽度去设置html的font-size，此时若我们设置为50px，这时1rem表示50px
100px变50px，很好理解，这就已经实现将750px的设计稿缩放在宽度为375px设备上了；当我们针对不同设备的不同宽度去设置html的font-size时，就很好的适配了移动端。
总结，通过viewport的meta标签将可视视口的宽度设置为设备像素的宽度即屏幕大小，保证页面无横向滚动条，利用rem，将宽为750px的设计稿缩放在不同宽度的设备上。
参考链接：
1、https://www.quirksmode.org/mo...
2、https://www.quirksmode.org/mo...
3、https://github.com/jawil/blog...