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

2021/10/21 6:12:43

本文主要是介绍前端怎么解决项目适配问题,把px单位换成rem单位,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

 flexible.js下载地址,提取码:wdn1

<!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>

 

前端做适配的方式有很多中,我们今天讲的是使用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://pan.baidu.com/s/1an88JrVqJuaU4-OTkVhwQA
提取码:wdn1



这篇关于前端怎么解决项目适配问题,把px单位换成rem单位的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程