日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

前端怎么把px單位換成rem單位解決項(xiàng)目頁(yè)面適配問(wèn)題

作者：草樣的年華 更新時(shí)間： 2022-06-06 編程語(yǔ)言

先看沒(méi)有適配前的效果，下面是沒(méi)有適配前，使用的是px單位，代碼和效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端解決項(xiàng)目適配問(wèn)題</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>

?

說(shuō)明：px、rpx、em、rem當(dāng)然還有其它單位，這些單位在我們開發(fā)過(guò)程中最常見的長(zhǎng)度單位。首先去弄懂這幾個(gè)長(zhǎng)度單位的區(qū)別與用法，免得到時(shí)候有很多的兼容性問(wèn)題。這里我簡(jiǎn)單說(shuō)明下他們的區(qū)別：px像素是相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的(引自CSS2.0手冊(cè))。rpx其實(shí)是微信對(duì)于rem的一種應(yīng)用的規(guī)定，或者說(shuō)一種設(shè)計(jì)的方案，官方上規(guī)定屏幕寬度為20rem，規(guī)定屏幕寬為750rpx。em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊(cè))。rem是相對(duì)于根元素<html>，也就是說(shuō)，我們只需要在根元素確定一個(gè)參考值，其他子元素的值可以根據(jù)這個(gè)參考值來(lái)轉(zhuǎn)換。具體這個(gè)參考值設(shè)置為多少，完全可以根據(jù)我們自己的需求來(lái)定。

說(shuō)到這里，我們要進(jìn)入我們的正題了，前端做適配的方式有很多種，比如使用框架bootstrap、百分比等，我們今天講的是使用rem單位做適配。

首先第一步：引入flexible.js,它的作用是根據(jù)獲取當(dāng)前網(wǎng)頁(yè)的寬度除以相應(yīng)的數(shù)（默認(rèn)是24），設(shè)置html的font-size，間接影響所有的rem。

第二步，把px換成rem，換算關(guān)系是根據(jù)flexible.js里面的第十七行var rem = docEl.clientWidth / 10決定的，docEl.clientWidth就是我們當(dāng)前網(wǎng)頁(yè)的寬度，也就是outside為1920，所以這就相當(dāng)于1rem=1920/10=192px，這個(gè)時(shí)候就把網(wǎng)頁(yè)有關(guān)使用px單位的都換成rem單位，它們之間的轉(zhuǎn)換關(guān)系為1rem = 192px, 2rem = 384px（這個(gè)轉(zhuǎn)換不固定的，是根據(jù)你當(dāng)前網(wǎng)頁(yè)的寬度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少為準(zhǔn)，默認(rèn)除以24）把px都按轉(zhuǎn)換關(guān)系換成rem單位后，就完成了適配。

適配后，代碼和效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端解決項(xiàng)目適配問(wèn)題,適配后</title>
		<style type="text/css">
			.outside{
				/* 1920除以10等于192(rem)  所以1rem = 192px*/
				width: 192rem;
				height: 100%;
			}
			.interior{
				/* 第二步，把px換成rem 
				   換算關(guān)系是根據(jù)flexible.js里面的第十七行var rem = docEl.clientWidth / 10決定的，
				   docEl.clientWidth就是我們當(dāng)前網(wǎng)頁(yè)的寬度，也就是outside為1920
				   所以這就相當(dāng)于1rem=1920/10=192px，這個(gè)時(shí)候就把網(wǎng)頁(yè)有關(guān)使用px單位的都換成rem單位，
				   它們之間的轉(zhuǎn)換關(guān)系為1rem = 192px, 2rem = 384px（這個(gè)轉(zhuǎn)換不固定的，是根據(jù)你當(dāng)前網(wǎng)頁(yè)的寬度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少為準(zhǔn)，默認(rèn)除以24）
				   把px都按轉(zhuǎn)換關(guān)系換成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文件是關(guān)鍵，flexible.js下載地址，提取碼：wdn1，按F12打開控制臺(tái)，看html里面是否font-size屬性，如下圖所示：

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

欄目分類
最近更新