移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）

viewport（视口）

1. 具体数值（不设置时默认为980 ，部分安卓手机不支持设置成具体数值）
2. width=device-width 和设备宽度保持一致
3. user-scalable=no 是否允许用户缩放no/yes（iOS10不支持 近乎无解）
4. initial-scale 初始缩放比例
5. minimum-scale 最小缩放比例
6. maximum-scale 最大缩放比例

页面宽度

页面宽度=device-width/scale

在页面中实现等比像素的JS代码：

<!--利用页面的像素比来进行页面的缩放 显示等比像素 但每个设备不是相同宽度-->
<script type="text/javascript">
(function(){
	var meta = document.createElement("meta");
	var scale = 1/window.devicePixelRatio;
	meta.name = "viewport";
	meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
	document.head.appendChild(meta);
})();
</script>

在页面中实现相同宽度显示的JS代码：

<!--页面宽度适配 显示相同宽度 但每个设备所显示的像素大小不一样-->
<script type="text/javascript">
(function(){
	var meta = document.createElement("meta");
	var width = window.screen.width;
	var targetWidth = 320;
	var scale = width/targetWidth;
	meta.name = "viewport";
	meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
	document.head.appendChild(meta);
})();
</script>

window.devicePixelRatio 像素比

[不可改变，只能获取]

1px的内容放大N倍显示

[像素比为2 整个页面的内容就被放大两倍显示]

分辨率：屏幕图像的精密度，是指显示器所能显示的点数的多少

分辨率越高，像素越大，在相同宽度下，屏幕所能显示出来的东西越多，但是显示出来就越小。

移动端布局

• 1em=当前元素的一个文字大小
• rem(root em) 1rem=html的一个文字大小
• [rem布局原理简单的来说就是把页面虚拟成一个网格,每行的格子的大小都是一致的，每行的格子也是固定的，我们在设置元素的尺寸的时候，不在固定使用PX，而是设置占了多少格格子,然后在根据页面宽度的不同，来修改每个格子的大小，从而使页面等比的缩放. ]
• 通过js获取页面的宽度

<script type="text/javascript">
(function(){
	var html = document.documentElement;//获取到HTML
	var width = html.clientWidth// 获取html的宽度
	//html.style.fontSize html的字体大小
	html.style.fontSize = width/10 + "px";
	//console.log(width);
	// 1rem = 1个格子的大小
})();
</script>

• [ 使用rem时，注意页面接受的最小字体是12px,所以一般不会分超过25个格子,一般要适配最小的宽度是320 ]