移动端适配

一、移动端为什么要做适配

移动端大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者需要考虑横竖屏的问题，此时就要解决在不同手机上，不同情况下的展示效果了。

另外一点，UI一般给的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑），这时候开发人员就要针对这一份设计稿，让其在不同屏幕宽度下显示一致。

因此，移动端适配的目的是在不同尺寸的设备上，页面达到合理的展示（自适应）或者说是能够保持统一效果。

二、viewport的基本概念

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

• 布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况

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

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

• 理想视口的设置：

 <meta name="viewport"content="width=device-width,initial-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0" ,user-scalable=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%，这样不固定宽度，使得在不同的分辨率下都能达到适配。

注意：各个子元素或属性的百分比设置时的参照对象：

1. 子元素width、height的百分比: 相对于子元素的直接父元素；
2. margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关；
3. border-radius的百分比：border-radius的百分比是相对于自身宽度，与父元素无关

一般要固定高度：适用于规则布局。

(3)rem:

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

<script type="text/javascript">
	remChange()
	window.addEventListener('resize', remChange);
	function remChange() {
		var html = document.getElementsByTagName('html')[0],
			width = html.getBoundingClientRect().width;
		if (width >= 750) {
	   		width = 750;
		}
		html.style.fontSize = width / 10 + 'px';
	}
</script>

(4)固定宽度，改变缩放比例适配：

动态配置meta标签;

<script type="text/javascript">
	var width = window.screen.width,
	    fixedW = 750, //设计稿宽度大小
		scale = width / fixedW,
		meta = document.createElement('meta');
	meta.setAttribute('name', 'viewport');
	meta.setAttribute('content', 'width=' + fixedW + ',user-scalable=no,initial-scale=' + scale + ',maximum-scale=' +	scale + ',minimum-scale=' + scale);
	document.head.appendChild(meta);
</script>

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

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

参考链接：https://juejin.im/post/5bfa99e0e51d4555557d26c6