移动端适配（需补充）

上一篇有说道“兼容”，这一篇谈谈“适配”，我们知道，PC的项目都是根据设计图固定尺寸测量出来直接写就可以了，当我们开始做移动端页面的时候，设计师给了一份宽度为640px的设计图。那么，我们把这份设计图实现在各个手机上的过程就是“适配”

目前移动端适配有三种方法：

1、 固定宽度，高度自适应（配合媒体查询）

这是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex。

原理

这种方法使用了完美视口：

<meta name="viewport" content="width=device-width,initial-scale=1">

2、固定宽度，viewport缩放（浏览器帮助完成缩放，单位px）

设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px。

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

640 是我们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。

生成的viewport告诉浏览器网页的布局视口使用 640px，然后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。
3、rem做宽度，viewport缩放（淘宝使用Flexble实现H5终端适配）

这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。

具体使用方法见使用Flexible实现手淘H5页面的终端适配

原理：
1> 屏幕宽度设置rem的大小，给html设置font-size；
2> viewport init-scale
3>根据设备像素比（上篇有介绍到）
这么设置的好处是可以让不同设备的rem或px都显示一样的长度。

设置rem

设置rem的意义在于得到一个与屏幕宽度相关的单位，本来vw是最合适的，但是因为兼容性的问题，只能使用rem来做。这样，让不同设备的rem显示一样的长度。

vw是CSS3引入的单位，1vw = 1%窗口宽度

上面的布局是：

html{    font-size: 屏幕宽度 / 10; }.btn{    width:8.75rem;    height:1.25rem;}

设置 viewport 缩放 和 data-dpr

这两个设置其实是干的一件事，就是适配高密度屏幕手机的px单位。

.a{  font-size:12px;}[data-dpr="2"] .a{  font-size: 24px;}[data-dpr="3"] .a{  font-size: 36px;}

而缩放是动态的，这样，不同设备下的px显示一样的长度。

之前说过CSS像素和物理像素与缩放、dpr都有关系，这里说明：

在普通手机上，.a字体设置为12px；

在dpr是2的手机上，[data-dpr=”2”] .a字体为24px，又因为页面缩放50%，字体为还是12px