資訊專欄INFORMATION COLUMN
摘要：的使用是相對于其父級的字體大小的，即倍數(shù)。瀏覽器的默認字體高都是，未經調整的瀏覽器顯示。而且的關系不好轉換，因此，常常人為地使。明顯地，內部內的文字受到了父級的影響。
有何區(qū)別
px 在縮放頁面時無法調整那些使用它作為單位的字體、按鈕等的大小；
em 的值并不是固定的，會繼承父級元素的字體大小，代表倍數(shù)；
rem 的值并不是固定的，始終是基于根元素 的，也代表倍數(shù)。
emem 的使用是相對于其父級的字體大小的，即倍數(shù)。瀏覽器的默認字體高都是 16px，未經調整的瀏覽器顯示 1em = 16px。但是有一個問題，如果設置 1.2em 則變成 19.2px，問題是 px 表示大小時數(shù)值會忽略掉小數(shù)位的（你想像不出來半個像素吧）。而且 1em = 16px 的關系不好轉換，因此，常常人為地使?1em = 10px。這里要借助字體的 % 來作為橋梁。
因為默認時字體 16px =?100%，則有 10px =?62.5%。所以首先在?body 中全局聲明 font-size=62.5%=10px，也就是定義了網頁 body 默認字體大小為 10px，由于 em 有繼承父級元素字體大小的特性，如果某元素的父級沒有設定字體大小，那么它就繼續(xù)了 body 默認字體大小?1em = 10px。
但是由于 em 是相對于其父級字體的倍數(shù)的，當出現(xiàn)有多重嵌套內容時，使用 em 分別給它們設置字體的大小往往要重新計算。比如說你在父級中聲明了字體大小為 1.2em，那么在聲明子元素的字體大小時設置 1em 才能和父級元素內容字體大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 因為此 em 非彼 em。再舉個例子：
Outer inner outer
body { font-size: 62.5%; }
span { font-size: 1.6em; }
結果：外層 為 body 字體 10px 的 1.6倍 = 16px，內層 為外層內容字體 16px 的 1.6倍 = 25px（或26px，不同瀏覽器取舍小數(shù)不同）。
明顯地，內部 內的文字受到了父級 的影響。基于這點，在實際使用中給我們的計算帶來了很大的不便。
rem引述 MDN:
rem?values are relative to the root?html?element, not the parent element.
rem 的出現(xiàn)再也不用擔心還要根據(jù)父級元素的 font-size 計算 em 值了，因為它始終是基于根元素（）的。
比如默認的 html font-size=16px，那么想設置 12px 的文字就是：12÷16=0.75(rem)
仍然是上面的例子，CSS改為：
html { font-size: 62.5%; }
span { font-size: 16px; font-size: 1.6rem; }
結果：內外 的內容均為 16px。
需要注意的是，為了兼容不支持 rem 的瀏覽器，我們需要在各個使用了 rem 地方前面寫上對應的 px 值，這樣不支持的瀏覽器可以優(yōu)雅降級。兼容性詳情。
選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用 rem，如果要考慮兼容性，那就使用 px，或者兩者同時使用。
完。
參考淘寶UED：響應式十日談第一日：使用 rem 設置文字大小
MDN: font-size
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111343.html
摘要：是相對長度單位。相對于當前對象內文本的字體尺寸。引自手冊特點是新增的一個相對單位，根，這個單位引起了廣泛關注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。 國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？ PX特點 IE無法調整那些使用px作為單位的字體大小； ...
摘要：中常見尺寸單位描述百分比英寸厘米毫米一個是一個字體的。在中，是非常有用的單位，因為它可以自動適應用戶所使用的字體。在中唯一例外的是屬性，它的和值指的是相對父元素的字體大小。 CSS 中常見尺寸 單位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。) pt ...
摘要：一絕對長度單位絕對長度單位代表一個物理測量，當輸出介質的物理性質是已知的，如用于打印布局。對于打印機和高分辨率的屏幕，一個意味著多個設備像素，因此，每英寸的像素的數(shù)量保持在左右。是新增的單位，等于根元素的字體大小。 一、絕對長度單位 絕對長度單位代表一個物理測量，當輸出介質的物理性質是已知的，如用于打印布局。這是通過將一個單元錨定到一個物理單元，并將其定義為相對于它的另一個。對于低分辨...
摘要：引自手冊是相對長度單位。所有未經調整的瀏覽器都符合。特點是新增的一個相對單位，根，這個單位引起了廣泛關注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。 在他處看到一篇好文章，想記錄在自己的學習筆記中，原文作者看到我轉載若是介意，聯(lián)系我立馬就刪除，附上原文鏈接：http://www.huolg.net/html5/htm...
摘要：前言在自適應布局或者移動端網頁開發(fā)時，我們經常會用到和兩個長度單位。，相對長度單位。相對于當前對象內文本的字體尺寸。所有未經調整的瀏覽器中都是。最大的優(yōu)點是提供一致尺寸，便于計算。為了還原設計稿和實現(xiàn)合理的布局所以需要根元素重寫。 前言 在自適應布局或者移動端網頁開發(fā)時，我們經常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區(qū)別，以及他們的使用場景等。 區(qū)別 ...
閱讀 2054·2021-10-08 10:04
閱讀 3079·2021-09-22 10:02
閱讀 2225·2019-08-30 15:56
閱讀 825·2019-08-30 15:54
閱讀 921·2019-08-30 15:54
閱讀 1276·2019-08-30 15:53
閱讀 2508·2019-08-30 11:21
閱讀 3557·2019-08-30 10:56
