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

學無先后，達者為師

網站首頁 編程語言 正文

前端怎么把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

欄目分類
最近更新