資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的 em 和 rem 單位？
您可能已經注意到，在使用 CSS 屬性設定元素大小時，有兩種選擇，一種是絕對單位，另一種是相對單位。絕對單位是恆定的，大小固定，可以用 cm、mm、px 設定。另一方面，相對單位是相對於其他內容的，可以是父元素或任何其他元素。
在本教程中，我們將比較 CSS 中的 em 和 rem 單位。
Em 單位
em 單位使您可以更改元素的大小，其字型大小相對於其父元素。這意味著如果父元素的大小發生變化，子元素的大小也會發生變化。
讓我們來看一個例子，瞭解 em 單位的作用。
示例
在這個例子中，我們將把子元素的字型大小更改為35px。子元素的邊距也將更改為50px。
在這裡，我們首先建立了一個父元素，然後將其大小設定為 17.5 px，子元素的字型大小設定為 1em，這意味著子元素的字型大小將是父元素的兩倍，元素的邊距將保持不變。讓我們看看程式碼的輸出。
注意 - `font-size` 屬性的用法。當應用於其他屬性時，`font-size` 相對於父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Difference between em and rem</title>
<style>
.father {
paddding: 0px;
font-size: 16px;
}
.son {
margin: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<div class="father">
This is the Father element
<div class="son">
This is Son element
</div>
</div>
</body>
</html>
在上面的輸出中，有一個父元素和一個子元素。輸出中顯示子元素的大小與父元素相同。
Rem 單位
rem 單位相對於根元素（即 <html> 元素）的字型大小。如果<html>沒有指定字型大小，則使用瀏覽器的預設值，這裡不考慮父元素，只考慮根元素。
示例
我們將保持子元素的字型大小為 50px，然後將元素的邊距設定為 40px。與 em 不同，rem 單位的大小對於所有宣告都是相對的。
在下面的例子中，我們首先使用了根元素，然後建立了父元素和子元素。然後我們將根元素的字型大小設定為 18px，父元素的字型大小設定為 15px。然後將子元素的字型大小設定為 1.5rem，這意味著根元素的兩倍，而不是父元素的兩倍。讓我們看看輸出，瞭解 rem 單位的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>The difference between em and rem units</title>
<style>
html {
font-size: 18px;
}
.son {
font-size: 2rem;
margin: 1.5rem;
}
.father {
font-size: 13px;
}
</style>
</head>
<body>
<div class="father">
This is parent
<div class="son">
This is Child in rem unit system
</div>
</div>
</body>
</html>
您可以在上面的輸出中看到，子元素不是父元素的兩倍，而是根元素的兩倍。
em 單位相對於其最近的父元素的字型大小，它可能導致累積效應。rem 單位相對於 HTML 根字型大小，但不會導致累積效應。
CSS 中的 em 與 rem 單位
這些單位包括 em、vh、vw 和 rem。相對單位也稱為可縮放單位，在網站響應式設計中起著重要作用。em 和 rem 單位都是可縮放的相對單位。em 單位相對於 HTML 文件中父元素的字型大小，而 rem 單位相對於整個文件的根字型。
結論
em 和 rem 單位的區別在於，em 單位相對於父元素，而 rem 單位相對於 <html> 根元素，這兩個單位都屬於相對單位，有助於使網站具有響應性。這些單位有助於設定某些元素的大小。
463 次瀏覽
