徹底弄懂css中單位px和em,rem的區別

saucxs 發布于2019-08-29 12:25 / 2855人閱讀

摘要：是相對長度單位。相對于當前對象內文本的字體尺寸。引自手冊特點是新增的一個相對單位，根，這個單位引起了廣泛關注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。

國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那么三者有什么區別，又各自有什么優劣呢？

PX特點

IE無法調整那些使用px作為單位的字體大小；

國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；

Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)

EM特點

em的值并不是固定的；

em會繼承父級元素的字體大小。
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

rem特點
rem是css3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
下面就是一個例子：p {font-size:14px; font-size:.875rem;}

注意：
選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。

在這里為大家提供一個px,em,rem單位轉換工具地址：http://pxtoem.com/

GPU云服務器云服務器應用的是rem單位 px2rem css和html的區別 html和css的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111886.html

深入理解CSSem>中em, rem, ex區別，及使用技巧

摘要：中常見尺寸單位描述百分比英寸厘米毫米一個是一個字體的。在中，是非常有用的單位，因為它可以自動適應用戶所使用的字體。在中唯一例外的是屬性，它的和值指的是相對父元素的字體大小。 CSS 中常見尺寸單位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。) pt ...

lbool 2019-08-29 16:44 評論0 收藏0
CSSem>3 border-image 徹底明白

摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復性取值為重復只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復。不進行拉伸，不湊整。效果如下白框為部分資料來源網絡親們，看懂沒不懂請留言，幫你解答。。 border-image用于給border（邊框）貼上背景圖像類似于CSS中的background（背景）屬性。例如：background:url...

chenjiang3 2019-08-20 19:07 評論0 收藏0
CSSem>3 border-image 徹底明白

摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復性取值為重復只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復。不進行拉伸，不湊整。效果如下白框為部分資料來源網絡親們，看懂沒不懂請留言，幫你解答。。 border-image用于給border（邊框）貼上背景圖像類似于CSS中的background（背景）屬性。例如：background:url...

songjz 2019-08-29 13:19 評論0 收藏0
別再被各種單位迷惑：pxem>/em/rem

摘要：引自手冊是相對長度單位。所有未經調整的瀏覽器都符合。特點是新增的一個相對單位，根，這個單位引起了廣泛關注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。在他處看到一篇好文章，想記錄在自己的學習筆記中，原文作者看到我轉載若是介意，聯系我立馬就刪除，附上原文鏈接：http://www.huolg.net/html5/htm...

teren 2019-08-28 18:26 評論0 收藏0
pxem>、em和rem實戰經驗

摘要：前言在自適應布局或者移動端網頁開發時，我們經常會用到和兩個長度單位。，相對長度單位。相對于當前對象內文本的字體尺寸。所有未經調整的瀏覽器中都是。最大的優點是提供一致尺寸，便于計算。為了還原設計稿和實現合理的布局所以需要根元素重寫。前言在自適應布局或者移動端網頁開發時，我們經常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區別，以及他們的使用場景等。區別 ...

xietao3 2019-08-30 15:54 評論0 收藏0