rem、viewport、1px适配

最新推荐文章于 2022-03-08 19:06:09 发布

吞石鱼

最新推荐文章于 2022-03-08 19:06:09 发布

阅读量889

点赞数

文章标签：移动端适配方案

本文链接：https://blog.csdn.net/qq_38735649/article/details/82748466

版权

###rem适配

优点：可以使用meta标签，可以实现等比缩放
缺点：换算比较麻烦
核心思想：基于rem，布局中元素单位为rem，html根元素字体大小设置成屏幕宽
rem适配：设计图纸较大，元素相对较多（750px,1080px）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 8rem;
				height: 8rem;
				background: yellowgreen ; 
			}
			
			
		</style>
		<!--
			适配原因：实现等比效果			
		-->
		<!--
			rem适配：
				1.布局中元素单位 rem
				2.把 html 根元素字体大小设置成 屏幕宽
			
		-->
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
//		//屏幕宽
//		var width = document.documentElement.clientWidth;		
//		//获取html
//		var htmlNode = document.querySelector('html');
//		//设置html 字体大小
//		htmlNode.style.fontSize = width+'px';
		
		//优化
		!(function(){
			//屏幕宽
			var width = document.documentElement.clientWidth;	
			//创建style标签
			var styleNode = document.createElement('style');
			//设置html 字体大小
			styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
			//style标签 放到 head标签中
			document.head.appendChild(styleNode);
		})();
		
		
		// 10  20  16
	</script>
</html>

###viewport适配

优点：避免复杂的计算，直接使用UI的标准像素值

缺点：不能使用meta标签图片失真情况很严重
核心思想：把整个设计图纸变成屏幕区域大小，相当于放大操作

viewport适配：设计图较小（320px）百分比适配:(pc端，移动端) 页面元素较少

媒体选择器：（响应式布局）具体像素值（dpr=物理像素/css像素）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 160px;
				height: 160px;
				background: deeppink;
			}
		</style>
		<!--
			ui: 320px
			
			320px --- 375px
			
			viewport适配：
				把整个设计图纸变成屏幕区域大小（屏幕真实css像素大小 = 320） == 布局视口变成320
				
				方案1： width=320 (安卓手机不支持)
				方案2：initial-scale = 375/320  --- 放大操作
			
		-->
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">

		//优化
		!(function(){
			//屏幕宽
			var width = document.documentElement.clientWidth; //375
			//目标宽度
			var targetW = 320;			
			//比例
			var scale = width/targetW;
			var metaNode = document.querySelector('meta[name="viewport"]')
			metaNode.setAttribute('content','initial-scale='+ scale +',user-scalable=no')			
		})();
		
	</script>
</html>

1px适配

rem适配和viewport适配结合版。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 8rem;
				height: 8rem;
				
				border: 1px solid #000;
			}
			
			
		</style>
		<!--
			1px 适配  -- 物理像素
			
			1.布局元素 单位 rem
			2.边框 单位 px
			3.通过dpr让元素进行缩放，initial-scale=0.5
			4.布局元素 单位 rem ,反向把缩放比例乘回来  2
						
		-->
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//获取dpr
		var dpr = window.devicePixelRatio; // 2		
		//比例              // 0.5
		var scale = 1/dpr; 
		
//		var width = document.documentElement.clientWidth;//375
		
		//3.通过dpr让元素进行缩放，initial-scale=0.5
		var metaNode = document.querySelector('meta[name="viewport"]');
		metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no')
		
		var width = document.documentElement.clientWidth;//750
		
		//4.布局元素 单位 rem ,反向把缩放比例乘回来  2
		var styleN = document.createElement('style');
//		styleN.innerHTML = 'html{font-size: '+ width/16*dpr +'px !important;}';
//		styleN.innerHTML = 'html{font-size: '+ width*dpr/16 +'px !important;}';
//		styleN.innerHTML = 'html{font-size: '+ 750/16 +'px !important;}';
		styleN.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
		
		document.head.appendChild(styleN);
		
	</script>
	
</html>