了解几个概念：
- 屏幕尺寸：屏幕对角线长度
- 像素：组成一幅图像的最小图像单位。
- 分辨率：屏幕分辨率低，在屏幕上显示的像素少，单个像素尺寸比较大
- 物理分辨率：设备像素
- 逻辑分辨率：设备独立像素
- 设备像素比：dpr 物理像素/逻辑像素
为什么要移动端适配：物理分辨率变大，图像被缩小。在iphone4 中使用了视网膜屏幕概念。把2*2个像素当成一个像素使用。所以高分辨率的设备，多了一个逻辑像素
响应式布局强调不同屏幕要不同的显示，比如媒体查询， 而弹性布局本质上是等比缩放，100%还原。rem是一种弹性布局的实现，而弹性布局属于响应式布局的一种， 但是响应式布局不是弹性布局。
移动端适配：
一、弹性布局：
操作1 : 配置 viewport
<meta name="viewport" content="width=device-width;initial-scale=1;maximum-scale=1;minimum-scale=1;user-scalable=no;">
- 宽度为设备宽度
- 最小缩小比例为1，最大缩小比例为1，初始缩小比例为1
- 不允许用户手动缩放页面
1.css单位：em
先有的em，再有的rem。em相对于父元素 em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
比如父元素是16px。
那么子元素A就是 20px/16px = 1.25em;
A元素的子元素B 想要18px，那么就是 18/20 = 0.9em；
以此类推...
缺点：牵一发而动全身
2.css单位：rem 【！！重要！！】弹性布局
rem 是css3新增的一个相对单位。相对于html根元素，设置html的fontsize，下面的元素都根据html计算字体大小
原理：
假如把屏幕分成100份数，一份就是等于 屏幕宽度/100 ，也就是1x。
如果x做为单位那么，50x 就是屏幕的一半， 也就是50%。所以x前面的数值就代表屏幕宽的%。
但是实际上css中没有x单位。
那么尝试使用rem转换一下:html字体是2rem的话， 就是32px。那么子元素的2rem 就是32*2 = 64px。
// 作用于根元素，相对于原始大小（16px），所以html的font-size为32px
html{font-size:2rem}
// 作用于非根元素，相对于根元素字体大小，所以为64px
p{font-size:2rem}
那么如果html的字体恒等于 1x，那么子元素的就是50rem = 50x = 50%；
document.documentElement.style.fontSize=document.documentElement.clientWidth/100+'px';
比如设计图的宽度是750px,而iphone6的屏幕宽度是375px,那么html的字体应该是50px,这样的话设计图上的60px 就是0.6rem;
50px = 375 / （750px/100=7.5）
3.css单位：vh,vw【兼容性不好】
vw：视图窗口的 1/100;vh:视口告诉的1/100 这不就是单位x吗？ 1vw = 1x，有了vw我们就可以绕过rem这个终极了。
但是vw的兼容性不如rem。ios要6.1+ ，安卓要4.4+ 以上才支持
二、响应式布局：媒体查询
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
