移动端（四）适配、rem适配、viewport适配

最新推荐文章于 2025-05-26 10:48:05 发布

李不烦

最新推荐文章于 2025-05-26 10:48:05 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/LWYYYYYY/article/details/95763774

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

博客介绍了做适配的目的是让元素在不同设备上显示效果等比。详细阐述了两种适配方法，rem适配需将元素单位统一用rem，并动态改变根元素HTML字体大小为屏宽倍数；viewport适配是把不同设备视觉视口设为一样大小，还给出了使用步骤和例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面我们已经可以用meta标签，做到布局视口等于理想视口了，为什么还要做适配，拿iPhone6（375*667)和iPhone6PLUS（414*736）举例，一个宽为200px的元素，在两部手机上显示的比例不一样，分别是 200/375和200/414，我们要做适配的目的，就是做到每个元素在不同的设备上显示的效果一样，做到等比。

一、rem适配

rem是一个单位，1rem=html根源元素字体大小，HTML根元素的默认字体大小是16px,所以在默认的情况下1rem=16px.

rem适配方法的步骤：1、元素单位统一用rem

2、动态给根元素HTML的字体大小改成屏宽的倍数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initail-scale=1.0,user-scalable=no"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 8rem;
				height: 8rem;
				background: deeppink;				
			}
			
			
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>

	<script type="text/javascript">

		//IIFE
		(function(){
			var width = document.documentElement.clientWidth;
			var styleN = document.createElement('style');
//  动态将根元素字体的大小设置为屏宽的十六分之一
			styleN.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
			document.head.appendChild(styleN);
		})();
		
		
	</script>
</html>

二、viewport适配

viewport适配是将不同的设备视觉视口设置成一样大小

场景：比如一个UI设计师设计一张宽为300的图纸

需求：将图纸大小的300px设计成屏宽

使用步骤：1、获取clientwidth

2、获取缩放比例 clientwidth/targetWidth

3、动态设置initial-scale

例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
		<!--width=320   兼容问题-->
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 160px;
				height: 200px;
				background: deeppink;
			}
		</style>
	</head>

	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		var targetW = 320;
		
		var width = document.documentElement.clientWidth; //375
		console.log(width);
		//比例
		var scale = width/targetW;	

		var meta = document.querySelector('meta[name="viewport"]');

		//覆盖操作
		meta.setAttribute('content','initial-scale='+ scale+',user-scalable=no');

		
	</script>
</html>