移动端的三种适配

移动端的三种适配

适配的目的：实现等比效果！（如果屏幕宽度是320px，元素宽度是160px，想要在不同屏幕中都占据一半的大小，此时我们就需要适配）。
默认情况下不等比：不加meta标签时是等比的，加上meta标签后就不等比了。
#1.rem适配
rem适配的本质：rem参照根元素字体，不管视图多大，在不同机型上，1rem等于视图的宽度，所以，这时候根元素的font-size改成了布局视口大小了。

<script type = "text/javascript">
	(function(){
		var width = document.documentElement.clientWidth;
		var styleN = document.createElement('style');
		styleN.innerHTML = 'html{font-size:' + width + 'px;}';
		document.head.appendChild(styleN);
	})();
</script>

#2.viewport适配
如果UI给的设计图纸是320px的，那么这个尺寸覆盖不了整个屏幕（苹果6的设备独立像素时375），第一种解决方案是我们可以不写完美的meta标签：

<script type = "text/javascript">
	var width = screen.width;
	var targetW = 320;
	//缩放比例
	var scale = width/targetW;
	var metaN = document.querySelector('meta');
	metaN.setAttribute('name','viewport');
	metaN.setAttribute('content','initial-scale:' + scale);
	document.head.appendChild(metaN);
</script>

但是直接获取屏幕的宽度我们并常写（screen.width），第二组解决方案则是完全的meta标签可以写上，我们获取meta的DOM，设置content属性：

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

<script type = "text/javascript">
	var width = document.documentElement.clientWidth;
	var targetW = 320;
	var scale = width/targetW;
	var metaN = document.querySelector('meta[name="viewport"]');
	metaN.setAttribute('content','initial-scale' + width);
</script>

#3.1px适配
这里的1px指的是物理像素。如果我们给一个元素设置一个1px的边框，那么它对应的是2个物理像素。所以我们如果要实现1物理像素，就得将元素边框设置为0.5px，但通过测试并没有达到我们想要的结果。
这时候我们可以通过meta标签中的initial-scale属性设置缩小效果，写上完美的meta标签后，我们可以动态地修改它。

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

<script type = "text/javascript">
	var dpr = window.devicePixelRatio;
	var scale = 1/dpr;
	var width = document.documentElement.clientWidth/16 * dpr;
	var metaN = document.querySelector(meta[name='viewport']);
	metaN.setAttribute('content','initial-scale' + scale);

	var styleN = document.createElement('style');
	styleN.innerHTML = 'html{font-size:' + width 'px;}'
	document.head.appendChild(styleN);
</script>

尽管我们实现了1px适配，但是整个页面我们做了缩小的处理，所以其中的元素都会缩小，我们可以将边框的单位用px表示，而元素的单位用rem表示：

<div class = "box"></div>
<style type = "text/css">
.box{
	width:8rem;
	height:8rem;
	border:1px solid;
}
</style>

关注微博、微信公众号搜索前端小木，让我们一起学习成长。