溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
應用象EM 和 REM這種相對長度單位進行頁面排版是WEB開發中的最佳實踐。在頁面排版中較好應用EM 和 REM，根據設備尺寸縮放顯示元素的大小。這就使得組件在不同設備上都達到最佳的顯示效果成為可能。
但問題是究竟該用 EM 還是 REM 呢？關于這個問題一直存在比較大的爭議。本文將會給大家介紹究竟什么是 EM 和 REM 和如何進行兩者的選擇，以及結合兩者優勢構建模塊化的WEB組件。
注：本文內容簡單，只面向初級開發人員，約2500字，閱讀時間5分鐘。
em 是相對長度單位。它相對于當前元素字體尺寸，即font-size。舉例來說，如果當前元素的字體是20px，那么當前元素中的1em就等于20px。
h2 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */實際開發中，用相對長度單位（如 em）表示字體大小是WEB開發中的最佳實踐。
考慮下面的代碼：
h2 { font-size: 2em } 這里的h2元素字體大小究竟是多少呢？
這時，我們需要根據<h2>父元素字體的大小，來計算<h2>字體的尺寸大小。如果父元素是<html>，而且<html>的字體大小是16px。就可以計算出<h2>的字體大小是32px，即2*16px。
用代碼表示如下：
html { font-size: 16px }
h2 { font-size: 2em } /* 16px * 2 = 32px */設置<html>字體的大小一般來說都不是一個好主意，因為這樣重寫了用戶瀏覽器的默認設置。相反，可以使用百分比值或者根本不聲明<html>字體大小。
html { font-size: 100% } /* 缺省 16px */對于大多數用戶或瀏覽器，字體缺省大小是16px（未做瀏覽器缺省字體尺寸設置）。
em 還能用來指定除字體大小外的其它屬性，象margin或padding等屬性都可以用em來表示。
考慮下面的代碼， 對于<h2>和<p>元素，margin-bottom值應該是多少？ （假設<html>的字號被設置為100％）。
h2 {
font-size: 2em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 32px */
}
p {
font-size: 1em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 16px */
}上述<h2>和<p>的margin-bottom都是1em，但是外邊距結果值卻不相同。上述現象的出現，是因為em是相對于當前元素字體的大小。由于<h2>中的字體大小現在設置為2em， 因此<h2>中其它屬性的1em值就是 1em = 32px。這里比較容易引起誤解的地方。
rem表示 root em，它是相對于根元素的長度單位。這里根元素就是<html>中定義的字體大小。這意味著任何地方的1rem總是等于<html>中定義的字體大小。
利用上述相同的代碼，我們用 rem 來代替 em，查看margin-bottom的計算值究竟是多少？
h2 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem = 16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem = 16px */
}如上述代碼所示，1rem總是等于16px（除非變更了<html>字體的大小）。rem的大小相較于em來說意義更直接明確，也很容易理解。
在項目開發中究竟是選用 rem 還是 em 一直以來爭議不斷。一些開發人員不使用rem，因為rem使組件不那么模塊化。而另一些開發人員喜歡rem的簡單性，使用rem處理所有元素。
其實 em和rem都有各自的優勢和劣勢，在實際項目開發中，應該結合使用兩者，利用各自的優勢，從而實現較好代碼質量和顯示效果。
那么在具體的應用中如何在兩者中做選擇呢？有兩條簡單的指導原則：
emrem上述規則太簡單了。 為了更好的理解上述規則，我們就以一個簡單的header組件為例，說明單獨使用兩者來實現組件遇到的問題，并體會結合使用兩者所帶來的優勢。
這里我們只使用rem來編寫一個header組件，代碼及運行結果如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
接下來，網站需要一個尺寸更大的header組件。
變更CSS代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}運行結果如下：
從上述運行結果可以看出，文字的內邊距（padding）過小，顯示效果不協調。如果我們堅持只使用rem，只能變更css代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}變更后運行結果如下：
上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼復用的原則。如果網站有多種尺寸的.header樣式，就要多次重復的定義內邊距。重復的代碼增加了項目復雜度，降低了可維護性。
這時可以利用em可以變更上述代碼如下：
.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}運行結果請查看演示程序：
演示代碼
如上述演示程序所示，當元素屬性值的大小需要根據元素字體尺寸縮放時，就應該應用 em 來定義屬性尺寸。這就是前述規則中的第一條規則。
如果只使用em來定義上述組件，結果會怎樣呢？
我們變更上述代碼如下（em替換rem）：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}為更接近實際，我們引入了<p>元素，并變更html代碼如下：
<div class="header header-large">名人名言</div>
<p>簡單是穩定的前提</p>
<div class="header">名人名言</div>
<p>簡單是穩定的前提</p>增加p元素css代碼如下：
p {
padding: 0.5em 0.75em;
}運行結果如下：
從上述運行經果中，不難看出.header-large部分的標題并沒有和文本左對齊。而如果只使用em實現左對齊，則需要變更CSS代碼如下：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
padding-left: 0.375em;
padding-right: 0.375em;
}變更后運行結果如下：
上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼復用的原則。如果網站有多種尺寸的.header樣式，就要多次重復的定義左右邊距。重復的代碼增加了項目復雜度，降低了可維護性。
解決上述問題的辦法是結合使用em和rem，即使用em定義上下邊距，使用rem定義左右邊距。變更后代碼如下：
.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}運行結果請查看演示程序：
演示代碼
究竟是該使用em還是rem呢？答案應該是結合使用rem和rem。當屬性值的大小需要根據當前元素字體尺寸縮放時，就選用em，其它的情況都使用更簡單的rem。
em和rem 屬性值都要經過計算轉化成絕過長度單位。常用的字體尺寸用相對長度單位表示會很困難。看下面常用字體值的rem表示（基本字體尺寸是16px）：
如上述列表所示，上述尺寸值的表示及計算都不分的不便。為了解決上述問題要用到一個小技巧，即著名的 "62.5%"技術。具體請查看下述代碼：
body { font-size:62.5%; } /* =10px */
h2 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */通過62.5%的設定，就可以很容易用em來定義具體屬性的尺寸了（10倍的關系）。
而rem，則需要采用如下的方式：
html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h2 { font-size: 2.4rem; } /* =24px */一個簡單的響應式的例子，調整瀏覽器寬度查看演示效果。
演示代碼
文中所述文字及代碼部分匯編于網絡。因時間不足，能力有限等原因，存在文字闡述不準及代碼測試不足等諸多問題。因此只限于學習范圍，不適用于實際應用。另em和rem在較老的瀏覽器中存在兼容性問題。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
