Rems、ems 和像素。 有什麼不同？
已發表: 2015-12-30如果您打開任何網站樣式表，您會遇到 rems、ems 或像素，或它們的任何組合。 在 CSS 樣式中，這些是使用的主要測量單位。 無論您是從頭開始設計網站，還是“繼承”了需要維護的先前設計的網站，這些對於視覺設計中的排版、間距和其他大小都很重要。
是什麼讓一種計量單位比另一種更好？ 沒有一個明確的答案，根據情況，一個可能比另一個更受歡迎。 了解用例以及最有效的方法將有助於確定適合您的樣式的最佳測量方法。
像素
從網絡的早期開始，像素就成為了隨處可見的樣式表中的一個選項。 它們是可靠的、精確的，它們的一致性是無法比擬的。 所有瀏覽器都支持像素，這使得它們易於使用。
儘管像素很棒，但它們確實有一些局限性。 因為它們是這樣一個集合度量，所以用戶無法在瀏覽器設置中更改默認瀏覽器文本的大小。 事情不會像使用 ems 和 rems 那樣擴大規模，從用戶可訪問性的角度來看，很難改變大小。 有人可能會爭辯說，用戶可以放大，而不是進入瀏覽器設置。 沒有一個正確或錯誤的答案，只是需要牢記。
這些是什麼？
像素是基於集合大小的測量單位。 它們是在屏幕上測量尺寸的單位，在需要精確設計時使用。 我們說“像素分辨率”之類的東西，所以我們習慣了這種測量方式。
一個例子看起來像這樣：
.main-header p {
font-size: 14px;
}
像素在網頁設計中有其用途，但在與設備無關的網頁設計時代，屏幕尺寸並不是主要關注點。 一切都是關於如何使我們的內容最適合無數設備，因此有 ems 和 rems 可以提供幫助。
EMS
這種計量單位有著悠久的歷史。 它可以追溯到 1996 年，並且從 CSS 的早期就已經存在。 像素被認為是最佳實踐，因此 em 在早期並不流行。 此後，它們受到歡迎，因為它們的目的是作為一個與特定內容中的字體大小相關的單位，並且有助於保持一致性。
這些是什麼？
如果您熱衷於經典排版，您可能會認出“em”，因為它是一種源自印刷字體世界的度量單位。 在排版中使用它作為一個單位，這個測量值等於當前指定的磅值。 例如，16 磅字體中的一個 em 是 16 磅。 對於給定磅值的所有字體，該單位都是相同的。
我們不是在這裡談論印刷，那麼 ems 是如何融入網頁設計的呢？ 相對大小是 ems 的一大賣點，因為它有助於控制與其他元素相關的元素的大小。 Ems 可以作為網站元素的重要組成部分，因為 em 值是複合的。 不過，真正了解這種複合是如何工作的很重要。
了解 ems
在大多數情況下，除非瀏覽器默認設置為其他值，否則 em 為 16 像素。 當你看到 1.5 em 時，它會變成 24 像素。 但這並不總是那麼簡單。 涉及嵌套時會發生什麼？ 它既方便又令人困惑。 了解使用 em 時的工作原理肯定有助於解開任何謎團。 下面“我是嵌套的”段落的大小是多少？
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
.one, .two {
font-size: 0.5em;
}
.three {
font-size: 2em;
}
這裡有 3 個 div，而且段落嵌套相當。 隨著 DOM 的級聯，您可能需要做一些偵探工作。 假設我們正在使用 16px 的 em，因為這是最常見的。
.one類是將 1em 乘以 0.5，即 0.5 em 或 8 px。 對於.two類，這再次乘以 0.5，即 0.25 em 或 4px。 事情變得越來越小，所以.three的類會有所幫助。 我們將取 0.25 em 並將其乘以 2。結果是 0.5 em 或 8px。
可能有幫助的一件事是在 HTML 元素上設置大小。 像這樣的東西將指定設置的 em 大小，而不是依賴於瀏覽器設置的 em。 讓我們將 1 em 設置為 20px。 如果將其與上面的示例一起使用，則將適用與嵌套相同的原則。 但請記住，我們已經指定了像素大小，因此這將影響使用瀏覽器設置選項縮放文本的能力。
html {
font-size: 20px;
}
除了像素，字體大小也可以設置百分比。 關鍵是 ems 可以與其他測量單位一起使用。 您肯定會遇到這種情況，因為將正文字體設置為百分比以幫助設置基線是很常見的。 假設字體大小從 em 大小的 62.5% 開始。 em 大小為 16px，字體大小為 10px。
body {
font-size:62.5%;
}
一旦你了解了，ems 可以成為你項目的一個很好的資產。 將子元素的文本調整到其父元素的大小當然可以派上用場。 此外，ems 可以很容易地在文本容器上指定比字間距更大的填充，使其遵循視覺鄰近規則。 相關項目將在視覺上進行分組，減少混亂，並提供有組織的佈局。
ems 的另一個重要特性是可訪問性優勢。 因為它是相對於 DOM 的根的，所以 ems 非常適合根據用戶偏好調整整個設計的大小。 在瀏覽器首選項中，您可以輕鬆更改默認字體大小，然後將計算（以 em 為單位）更改為整個網站。
雷姆斯
這些是什麼？
Rems 是對 CSS 時間線的一個相當新的補充。 這個度量單位是由 CSS3 引入的，它解決了像素和 em 的一些問題。 使用類似於“ems”的名稱，您可能想知道“r”代表什麼。 它來自“Root EM”一詞。
根是 HTML 元素。 HTML 元素上指定的大小是此測量的基礎。 您會看到我們在 HTML 元素上使用了 em 大小； 可以將兩種測量類型結合起來。
html {
font-size: 1em;
}
.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}
現代瀏覽器支持 rems，但在提交 rems 之前，請務必與 BrowserStack 確認您需要支持哪些舊瀏覽器。 不過，不要讓舊版瀏覽器阻礙您； 您始終可以為 IE9 以下的任何內容指定像素後備。 現代瀏覽器會忽略像素，因為它們更喜歡 rems。 它可能看起來像這樣：
.my-text {
font-size: 24px;
font-size: 1.5rem;
}
了解 rems
還記得我們必須為 em 的嵌套元素做的數學運算嗎？ 這對於 rems 是沒有必要的。 這一切都基於該根元素。 我們不必擔心父元素，它總是基於根。
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
html {
font-size: 1em;
}
.one, .two {
font-size: 0.52em;
}
.three {
font-size: 2rem;
}
這裡有 3 個 div，並且段落是相當嵌套的，就像我們在 em 示例中看到的那樣。 同樣，假設我們正在使用 16px 的 em 大小。
.one和.two類分配了大小，但它們在這裡並不重要，因為嵌套不會像 ems 那樣受到 rems 的影響。 真正重要的是 .three 的樣式，即 2 em。 該段落將基於 1em 的 HTML 元素。 這個測量值會加倍，給我們 2 rems 或 32 像素。
想要均勻地擴大一切嗎？ 只需調整根元素大小。 這在調整瀏覽器默認大小時也很有幫助。 你可以看到 ems 是如何允許的，rems 也可以。
不用擔心關於 rem 的不可預測的嵌套行為。 很容易理解根元素在哪裡發揮作用，以及在使用 rems 時它如何影響您的樣式。
在比較不同的測量值時，您可以看到它們各有優缺點。 真正了解測量單位的工作原理以及它們如何與瀏覽器設置一起工作，將幫助您選擇最適合情況或項目的測量單位。