2：适配问题

1：rem适配

(function(){
			var styleNode = document.createElement("style");
			var w = document.documentElement.clientWidth/16;
			styleNode.innerHTML = "html{font-size:"+w+"px!important}";
			document.head.appendChild(styleNode);
		})()

2：viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的*/

                 /*viewport适配的优缺点：

                         优点:所量即所得

                         缺点:没有使用完美视口*/

(function(){
			var targetW = 640;
			var scale = document.documentElement.clientWidth/targetW;
			var meta =	document.querySelector("meta[name='viewport']");
			meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
		})()

　3：练习1物理像素的实现 让1个CSS像素代表一个物理像素（利用像素比缩放，利用CSS3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 16rem;
				height: 1px;
				margin-top: 1rem;
				background: black;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			(function(){
				var dpr  = window.devicePixelRatio||1;
				var styleNode = document.createElement("style");
				var w = document.documentElement.clientWidth*dpr/16;
				styleNode.innerHTML="html{font-size:"+w+"px!important}";
				document.head.appendChild(styleNode);
				
				var scale = 1/dpr;
				var meta = document.querySelector("meta[name='viewport']");
				meta.content="width=device-width,initial-scale="+scale;
			})()
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 100%;
				height:1px ;
				margin-top: 50px;
				background: black;
			}
			@media only screen and (-webkit-device-pixel-ratio:2 ) {
				#test{
					transform: scaleY(.5);
				}
			}
			@media only screen and (-webkit-device-pixel-ratio:3 ) {
				#test{
					transform: scaleY(.333333333333333333);
				}
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
</html>

　　

posted @ 2018-11-04 16:00  INSTANCE_SELF  阅读(132)  评论(0)    收藏  举报