关于移动端适配的问题

移动端适配，就是WebAPP在不同屏幕上等比显示

第一：使用viewport（配置视口）

通过使用H5的标签进行适配不同设备 meta的使用>>

<meta name="viewport" 
	content="width=device-width,	//设置视口为设备屏幕的宽度，
	initial-scale=1.0,	//设置页面的初始缩放值，为一个数字，可以带小数
	maximum-scale=1.0,	//允许用户的最小缩放值，为一个数字，可以带小数
	minimum-scale=1.0,	//允许用户的最大缩放值，为一个数字，可以带小数
	user-scalable=no">	//是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

第二：css使用media查询

使用@media针对不同的设备定义不同的样式从而实现适配 更多media>>

@media mediatype and|not|only (media feature) {
	CSS-Code;
	}
	mediatype（媒体类型）
		all 指所有设备
		screen	用于电脑屏幕，平板电脑，智能手机（一般使用这个类型）
	逻辑运算符
		not：用来排除某种设备。比如，排除打印设备 @media not print；
		and：用来连接多种媒体特性。比如，@media screen and (max-width:800px) and (min-width:400px)
		only：用以指定某特定媒体设备。移动端会被忽略掉
	常用media feature（媒体功能）
		device-width	定义输出设备的屏幕可见宽度。（device-width同理）
		max-device-width	定义输出设备的屏幕可见最大宽度（min、max-device-height同理）
		height	定义输出设备中的*页面**可见区域*高度。（width同理）
		max-height	定义输出设备中的页面最大可见区域高度（min、max-width同理）

第三：使用css的rem

rem：CSS的长度单位，根元素的font-size的倍数，html中的根元素即html元素
大部分浏览器默认字体为16px，所以 16px = 1rem
rem适配原理：
	使用rem代替px，通过设置html的font-size更改全局样式，
	所以我们我们只需要考虑设计稿跟屏幕的尺寸比例即可
	各个手机的设备像素比可能不一样下面一iphone6为例计算出html的font-size

由上图得出一个通用的公式html的font-size = 100/dpr
所以只需使用JS动态计算出font-size就可以实现自己动适配了
JS代码为：

document.documentElement.style.fontSize = 100/window.devicePixelRatio