网站首页编程语言正文

前端怎么把px单位换成rem单位解决项目页面适配问题

作者：草样的年华更新时间： 2022-06-06 编程语言

先看没有适配前的效果，下面是没有适配前，使用的是px单位，代码和效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端解决项目适配问题</title>
		<style type="text/css">
			.outside{
				width: 1920px;
				height: 100%;
			}
			.interior{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="outside">
			<div class="interior"></div>
		</div>
	</body>
</html>

说明：px、rpx、em、rem当然还有其它单位，这些单位在我们开发过程中最常见的长度单位。首先去弄懂这几个长度单位的区别与用法，免得到时候有很多的兼容性问题。这里我简单说明下他们的区别：px像素是相对长度单位。像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)。rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。rem是相对于根元素<html>，也就是说，我们只需要在根元素确定一个参考值，其他子元素的值可以根据这个参考值来转换。具体这个参考值设置为多少，完全可以根据我们自己的需求来定。

说到这里，我们要进入我们的正题了，前端做适配的方式有很多种，比如使用框架bootstrap、百分比等，我们今天讲的是使用rem单位做适配。

首先第一步：引入flexible.js,它的作用是根据获取当前网页的宽度除以相应的数（默认是24），设置html的font-size，间接影响所有的rem。

第二步，把px换成rem，换算关系是根据flexible.js里面的第十七行var rem = docEl.clientWidth / 10决定的，docEl.clientWidth就是我们当前网页的宽度，也就是outside为1920，所以这就相当于1rem=1920/10=192px，这个时候就把网页有关使用px单位的都换成rem单位，它们之间的转换关系为1rem = 192px, 2rem = 384px（这个转换不固定的，是根据你当前网页的宽度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少为准，默认除以24）把px都按转换关系换成rem单位后，就完成了适配。

适配后，代码和效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端解决项目适配问题,适配后</title>
		<style type="text/css">
			.outside{
				/* 1920除以10等于192(rem)  所以1rem = 192px*/
				width: 192rem;
				height: 100%;
			}
			.interior{
				/* 第二步，把px换成rem 
				   换算关系是根据flexible.js里面的第十七行var rem = docEl.clientWidth / 10决定的，
				   docEl.clientWidth就是我们当前网页的宽度，也就是outside为1920
				   所以这就相当于1rem=1920/10=192px，这个时候就把网页有关使用px单位的都换成rem单位，
				   它们之间的转换关系为1rem = 192px, 2rem = 384px（这个转换不固定的，是根据你当前网页的宽度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少为准，默认除以24）
				   把px都按转换关系换成rem单位后，就完成了适配，
				*/
			   
			   /* 300除以192等于1.56(rem) */
				width: 1.56rem;
				height: 1.56rem;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="outside">
			<div class="interior"></div>
		</div>
		<!-- 第一步引入flexible -->
		<script src="./flexible.js"></script>
	</body>
</html>

注：是否引入flexible.js文件是关键，flexible.js下载地址，提取码：wdn1，按F12打开控制台，看html里面是否font-size属性，如下图所示：

原文链接：https://blog.csdn.net/qq_42690194/article/details/120876602

上一篇：在使用element-ui中的el-table组件时，怎么自
下一篇：max-width: 100%和width:100%的区别

网站首页 编程语言 正文

前端怎么把px单位换成rem单位解决项目页面适配问题

相关推荐

网站首页编程语言正文