viewport移动端适配

提到viewport移动端适配，那么心中可能有几个疑问？

1.为何要进行移动端的适配?

2.viewport是什么?

3.如何进行移动端适配?

1、移动端适配的目的：

一般咱们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。可是在移动端是不同的，若是将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一块儿、布局错乱或者出现横向滚动条的状况，咱们给用户带来很差的体验。还有在屏幕尺寸大小不一样的手机上进行访问页面时，页面显示的效果不能合理的展现，咱们指望的是在手机屏幕较大时显示的内容比较大一些，手机屏幕小的时候页面的内容也会缩小进行自适应。

所以，移动端适配的目的是在不一样尺寸的设备上，页面达到合理的展现（自适应）或者说是可以保持统一效果。

2、viewport的基本概念

1.一般viewport是指视窗、视口，浏览器上(也多是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不一样的，pc端的视口是浏览器窗口区域，而在移动端有三个不一样的视口概念：布局视口、视觉视口、理想视口

• 布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或其余值，通常都比移动端浏览器可视区域大不少，因此就会出现浏览器出现横向滚动条的状况

• 视觉视口：用户经过屏幕看到的页面区域，经过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

• 理想视口：通常来说，这个视口其实不是真是存在的，它对设备来讲是一个最理想布局视口尺寸，在用户不进行手动缩放的状况下，能够将页面理想地展现。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

为了理解起来更清楚一点，在网上找了两张比较易懂的图片。若是对这三个视口的概念还不是很清楚，看看下面几张图可能就会一目了然：

布局视口

视觉视口

2.那么如何设置理想视口呢？很简单，只须要在html的header中加入一段很重要的代码

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

这行代码你们应该都不陌生，或者说是知道加了这行代码，而后页面的宽度就会跟个人设备宽度一致。，实际上，它就是设置了理想视口，将布局视口的宽度设置成了理想视口（浏览器/设备屏幕的宽度）。

上面说到的视口宽度等均是css像素，因此须要简单了解一下几个基本的概念：

• css像素：代码中使用的逻辑像素，衡量页面上的内容大小

• 设备像素：即物理像素，控制设备显示的单位，与设备、硬件有关

• 设备独立像素：与设备无关的逻辑像素，不一样于设备像素（物理像素），不是真实存在的。

• 设备像素比：定义设备像素与设备独立像素比的关系window.devicePixelRatio）设备像素比=物理像素/设备独立像素

• 分辨率：指的是屏幕上垂直和水平的总物理像素

3.在meta标签中，除了viewport这个很重要的属性，用来设置视口的一些行为,还有几个与其搭配一块儿使用的属性：

属性	含义	取值
width	定义视口的宽度，单位为像素	正整数或设备宽度device-width
height	定义视口的高度，单位为像素	正整数或device-height
initial-scale	定义初始缩放值	整数或小数
minimum-scale	定义缩小最小比例，它必须小于或等于maximum-scale设置	整数或小数
maximum-scale	定义放大最大比例，它必须大于或等于minimum-scale设置	整数或小数
user-scalable	定义是否容许用户手动缩放页面，默认值yes	yes/no

3、适配的几种方案：

（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样式
}
......
复制代码

优势：

• 方法简单，只需修改css文件

• 调整屏幕宽度时不用刷新页面就能够响应页面布局

缺点：

• 代码量大，不方便维护

• 不可以彻底适配全部的屏幕尺寸，须要编写多套css样式

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

那么须要清楚一个问题，各个子元素或属性的百分比是根据谁来设定呢？

1. 子元素width、height的百分比:子元素的width或height中使用百分比，是相对于子元素的直接父元素
2. margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关
3. 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为固定单位的值

控制font-size的js代码

<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，可以被整除方便后面的计算。

元素的rem值计算

.div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 0.96rem;
        background:#aaa;
        font-size: 0.24rem;
        
    }
复制代码

假定一个div的宽度为100px,那么在计算时，根据设置的1rem = 50px，因此100px=2rem，其余全部的属性值均可以相似这样计算。font-size通常状况下仍是使用px,由于在rem中，只要使用了rem单位都会被转换，那么在转换的时候，会出现不能被整除或者出现小数的状况好比10.333333px，那么在显示时就可能出现一些误差。并且若是指望在小屏幕下面显示跟大屏幕同等量的字体，可是因为rem的等比缩放，在小屏幕下就会存在小屏幕字体更小的状况，因此对于字体的适配更好的作法就是使用px和媒体查询来进行适配。

优势：

• rem单位是根据根元素font-size决定大小，只要改变font-size的值，以rem为固定单位的元素大小也会发生响应式的改变

缺点：

• 必须经过一段js代码控制font-size的大小
• 控制font-size的js代码必须放在在页面第一次加载完成以前，而且放在引入的css样式代码以前。

(4)vw、vh方案 css3中引入与视口有关的新的单位vw和vh，vw表示相对于视口的宽度，vh表示相对于视口高度

单位	含义
vw	相对于视口的宽度，视口宽度是100vw
vh	相对于视口的高度，视口宽度是100vh
vmin	vw和vh中较小的值
vmax	vw和vh中较大的值

vw单位换算： 视口宽度为100vw占满整个视口区域，那么1vw至关于占整个视口宽度的1%，因此1px= 1/375*100 vw 全部的页面元素均可以直接进行计算换算成vw单位，可是这样计算和百分比方案计算比较相似，都会比较麻烦。

可是有一个比较厉害的插件—— postcss-px-to-viewport，能够预处理css,将px单位转换为vw单位，可是须要进行一些相关的webpack配置

{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375,
        		viewportHeight: 1334,
        		unitPrecision: 3,
        		viewportUnit: 'vw',
        		selectorBlackList: ['.ignore', '.hairlines'],
                minPixelValue: 1,
                mediaQuery: false
        	})
    	]
}
复制代码

接下来是对postcss-px-to-viewport配置中的属性的介绍：

单位	含义
viewportWidth	视口宽度（数字）
viewportHeight	视口高度（数字）
unitPrecision	设置的保留小数位数（数字）
viewportUnit	设置要转换的单位（字符串）
selectorBlackList	不须要进行转换的类名（数组）
minPixelValue	设置要替换的最小像素值（数字）
mediaQuery	容许在媒体查询中转换px（true/false）

优势：

• 指定vw\vh相对与视口的宽高，由px换算单位成vw单位比较简单
• 经过postcss-px-to-viewport插件进行单位转换比较方便

缺点：

• 直接进行单位换算时百分比可能出现小数,计算不方便

• 兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios八、android4.4如下不支持

最后，有一个问题，既然百分比和vw都是须要计算百分比，那么两个方案的不一样之处？

单位	含义
%	width、height等大部分相对于直接父元素、border-radius、translate、background-size等相对于自身
vw	只相对于视口宽度

以上，若有错漏，欢迎指正！

@Author：lj0214