移动端（二）——移动端适配方案之viewport适配、比例缩放适配和百分比适配

适配：在不同尺寸的手机上，页面相对性的达到合理的展示（自适应）或这保持统一效果的等比缩放（看起来差不多），例如一个占满屏幕宽度的元素，在不同尺寸的手机下所显示都是占满宽度。

适配的元素

1. 字体
2. 宽高
3. 间距
4. 图像（图标，图片）

适配方案：

1、百分百比适配
这种适配方案是给元素设置百分比，例如4个div想想占满宽度100%，则可以给每一个div设置宽度为25%，这样不固定宽度，使得在不同的手机尺寸下都能达到适配。

缺点：
1. 百分比的值不好计算
2. 需要确定父级的大小，因为要根据父级的大小进行计算
3. 宽度可以设置，但是高度不好设置

一般情况下百分比布局是是需要配合其它的布局而用

2、比例缩放适配
把所有机型的设备独立像素设置成一致的（以前淘宝用的是这种方法），这样做就可以有统一的宽度（设备独立像素宽），过程如下：

（1） viewport需要通过js动态的设置（不能直接把device的值设置成数值）

（2）通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的

注意：