说到移动端适配，做前端的同学肯定不会陌生，面试的时候可能也会问到相关问题。为何要写这篇文章？我最近学习移动端适配，参考了很多文章，写的都很不错，但是感觉都不太全面，对小白同学不太友好，所以今天写下这篇文章，记录下自己的一些思考，免得遗忘，也希望能够帮助到和我一样对这个问题感到迷惑的同学。
1. 一些概念
想要弄懂适配问题，你需要了解很多单位的含义：PX，PT，PPI，DPR，viewport …
这里不全部讲，只说一部分，具体的会单独放在另一篇文章里面。
1.1 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这段代码大家肯定都见过，这里来详细说一说。
定义
viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
这里是引用
如果没有viewport，横屏的PC端网页，会被缩小，然后挤到手机屏幕里，所以文字肯定都看不清楚了。
有了viewport，他是一个虚拟窗口，默认980px 或者是 1080px，这样就能把PC端网页装进去，而不会出现字体小的看不清楚的情况，这样就能正常显示了。
默认行为
- 默认比手机屏幕宽，最常见的尺寸是980px 或者是 1080px（苹果都是980px）
- 对于苹果，他有个默认的缩放比例，就是缩放到不出现横向滚动条为止，就相当于没有viewport的情况，现在所有的浏览器都支持viewport，所以不管你有没有设置过这个属性，他的默认行为都是存在的。
1.2 px
这个px能说的东西有很多，这里直说涉及到主题的一部分。
定义
PX是Pixel的缩写，就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和
Element（元素）这两个单词的字母所组成的
若把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位“像素”。这种最小的图形的单元能在屏幕上显示通常是单个的染色点。像素的大小是会“变”的，也称为“相对长度”。越高位的像素，其拥有的色板也就越丰富，越能表达颜色的真实感。
像素只是一个虚拟的单位，他的大小不固定，举个栗子：
这里要说一下分辨率：1920x1080，就是水平1920个像素，垂直1080个像素
我的手机和电脑的像素都是1920x1080，他们的1像素代表的大小肯定是不同的。
CSS像素
由于不同的设备1像素代表的大小不同，这就造成了100x100的div在宽度不同的设备上面显示的大小是不同的。
这个时候css希望他们显示一样的大小，然后他就自动做了一个调节，让100x100的div在任何宽度的设备上显示相同大小。
1.3 分辨率
1920x1080，对于电脑就是水平1920个像素，垂直1080个像素
1.4 rem
rem是CSS3新增的一个相对单位（root em，根em）,指根元素（root element，html）的字体大小，这里的根元素是：<html>元素
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
2. 适配
目的
让设计稿在不同尺寸下显示相同的效果。
例如：我再iphone5上面写了一个320x100的盒子，刚好占满屏幕。这个时候切换到iphone6，就会出现空白，但是我们希望他在iphone6上面页面刚好占满，这个时候就需要进行移动端适配，也就是说设计稿上面的尺寸都是不能直接使用的。
前提
适配的前提是页面能够正常浏览，视口viewport的默认宽度是980px，而且所有的苹果手机都是一样，这个宽度下字体是看不清楚的，我们要先保证字体正常显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
我们写页面的时候通常要加上这一段代码，让viewport的宽度等于设备的宽度，不缩放，这样字体就能正常显示，只是如果页面很宽的话会出现滚动条而已，但是现在很多大型网站移动和PC端会设计两套页面，所以很少有移动端直接显示pc端页面的情况。
rem原理
移动端适配的方法有很多，这里用rem来举个栗子：
上面说了css的自动调节行为让100x100的盒子在任何尺寸都显示相同的大小，但是我们就是希望他在不同的尺寸显示不同的大小，所以我们要把1css像素和屏幕的尺寸关联起来，让他随着屏幕尺寸大小的改变而改变。
我们的css尺寸可以使用rem作为单位，只要改变<html>这个元素字体的大小就能改变页面所有元素的大小。这样就做到了，页面中元素大小可变。
然后我们再把rem和设备尺寸关联，就能做到页面所有元素的大小随着设备尺寸改变而改变。
- 默认1rem = 16px
- 我们简单设置成1rem = 设备宽度/100
