許多網站都在使用難以在越來越多的不同設備中調整的像素單元，CSS3引入了一些新的單位，包括REM單位，它代表“root em”，這篇文章給大家分享的內容是關於REM的使用。
那麼，我們要如何使用REM？
假設我們有這個CSS：
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}首先，我們需要確定相對於所有字體的px大小。為了方便起見，我所做的最好的做法是使root font-size 1px像這樣：
CSS
html {font-size:1px;}其次，我們需要將其餘的字體大小值從像素替換為rem單位。
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}REM做什麼，需要20REM並將其與根元素相乘：
20 REM * 1 PX = 20PX.
瀏覽器支援
#IE7和IE8仍然需要使用PX值。這將迫使我們兩次寫入字體大小，一次在PX中，第二次使用REM。
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{font-size:1px;}
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
article p{
font-size:12px;/*Support IE7 & IE8*/
font-size:12rem;
}
</style>
</head>
<body>
<section>
<article>
<h2 id="php中文网">php中文网</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2 id="php中文网">php中文网1</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2 id="php中文网">php中文网2</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
</section>
</body>
</html>效果如下：
##REM有什麼優點？
讓我們假設我們需要將網站中的所有字體放大20％，我們所要做的就是更改根元素中字體大小的大小，如下所示：html {font-size:1.2px;}如果你想要將字體大小降低20％，你應該會這樣做：html{font-size:0.8px;}
REM用於響應式設計
如果要根據響應式設計中的斷點更改所有字體大小，則更容易。看例子：@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}}現在在較小的螢幕中，我們可以將所有字體的大小調整大40％，而在中等螢幕中，我們將其重新調整大小20％。
使用less來解決兩次寫入內容的需求- 用於支援舊瀏覽器
在less或sass中你可以添加函數來節省你寫兩次的所有時間。 可以使用less - font-size函數並呼叫它.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
}編譯後的CSS將如下所示：article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}以上是CSS3中REM單位的用法詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
讓我們使用（x，x，x，x）來談論特殊性Mar 24, 2025 am 10:37 AM前幾天我只是和埃里克·邁耶（Eric Meyer）聊天，我想起了我成長時代的埃里克·邁耶（Eric Meyer）的故事。我寫了一篇有關CSS特異性的博客文章，以及
您如何使用CSS創建文本效果，例如文本陰影和漸變？Mar 14, 2025 am 11:10 AM文章討論了使用CSS來獲得陰影和漸變等文本效果，優化它們以進行性能並增強用戶體驗。它還列出了初學者的資源。（159個字符）
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3漢化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
SublimeText3 Linux新版
SublimeText3 Linux最新版
