目錄
CSS3中REM單位的用法詳解（程式碼範例）
許多網站都在使用難以在越來越多的不同設備中調整的像素單元，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;}登入後複製
html{font-size:0.8px;}登入後複製
REM用於響應式設計
如果要根據響應式設計中的斷點更改所有字體大小，則更容易。看例子：@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}}登入後複製
使用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);
}登入後複製
article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}登入後複製
以上是CSS3中REM單位的用法詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？
Apr 05, 2025 pm 05:51 PM
關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...
