viewport移动端适配

一、移动端适配的目的：

通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我们给用户带来不好的体验。还有在屏幕尺寸大小不同的手机上进行访问页面时，页面显示的效果不能合理的展示，我们期望的是在手机屏幕较大时显示的内容比较大一些，手机屏幕小的时候页面的内容也会缩小进行自适应。
因此，移动端适配的目的是在不同尺寸的设备上，页面达到合理的展示（自适应）或者说是能够保持统一效果。

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

width
定义视口的宽度，单位为像素
正整数或设备宽度device-width


height
定义视口的高度，单位为像素
正整数或device-height


initial-scale
定义初始缩放值
整数或小数


minimum-scale
定义缩小最小比例，它必须小于或等于maximum-scale设置
整数或小数


maximum-scale
定义放大最大比例，它必须大于或等于minimum-scale设置
整数或小数


user-scalable
定义是否允许用户手动缩放页面，默认值yes
yes/no

二、适配的几种方案：

（1）css3 媒体查询:通过媒体查询的方式，编写适应不同分辨率设备的的css样式

@media screen and (max-width: 320px){
    ....适配iphone4的css样式
}
@media screen and (max-width: 375px){
     ....适配iphone6/7/8的css样式
}
@media screen and (max-width: 414px){
    ....适配iphone6/7/8 plus的css样式
}

(2)百分比布局方案：给元素设置百分比，例如2个div想占满宽度100%，那么一个div设置宽度为50%，这样不固定宽度，使得在不同的分辨率下都能达到适配。

• 子元素width、height的百分比:子元素的width或height中使用百分比，是相对于子元素的直接父元素。

• margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关。

• border-radius的百分比：border-radius的百分比是相对于自身宽度，与父元素无关。

• 优点：

  宽度自适应，在不同的分辨率下都能达到适配。

• 缺点：

  百分比的值不好计算 需要确定父级的大小，因为要根据父级的大小进行计算 各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
  高度不好设置，一般需要固定高度。

(3)rem方案:

• rem单位：rem是一个只相对于浏览器的根元素（HTML元素）的font-size的来确定的单位。默认情况下，html元素的font-size为12px。
• 通过rem来实现适配：rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的宽度发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。需要先动态设置html根元素的font-size,再计算出其他页面元素以rem为固定单位的值。

<script type="text/javascript">
    (function() {
        var deviceWidth = document.documentElement.clientWidth;
        deviceWidth = deviceWidth < 320 ? 320 : deviceWidth > 640 ? 640 : deviceWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    })();
</script>

上面的js代码中deviceWidth/7.5，表示font-size用deviceWidth/7.5的值来表示，1rem的值就是deviceWidth/7.5，当视口容器发生变化时就可以动态设置font-size的大小，不论页面宽度变大还是缩小，视口宽度都会被等分为7.5份，每一份就是1rem,从而1rem在不同的视觉容器中表示不同的大小，但在视口总宽度中的占比是不变的，实现了等比适配。
这个7.5在这里并不是一个固定的值，也可以设置为其他值，因为设计稿一般是根据iphone6/7/8的宽度来设计，一般为375或者750,所以为了方便计算，在这里取7.5，能够被整除方便后面的计算。