淺談px,em與rem

Yujiaao 發布于2019-08-29 12:25 / 3375人閱讀

摘要：關于表示像素計算機屏幕上的一個點，是絕對單位，不會因為其他元素的尺寸變化而變化關于任意瀏覽器的默認字體高都是。有如下特點的值并不是固定的會繼承父級元素的字體大小。避免字體大小的重復聲明。所有未經調整的瀏覽器都符合。

關于px

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化

關于em

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

em有如下特點：

1、em的值并不是固定的；

2、em會繼承父級元素的字體大小。

所以我們在寫CSS的時候，需要注意兩點：

1、body選擇器中聲明Font-size=62.5%；

2、將你的原來的px數值除以10，然后換上em作為單位；

3、重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合1em=16px。
在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px;12px就等于1.2em

關于rem

css3新增了相對單位 rem (IE8及以下不支持該單位),使用rem同em一樣皆為相對字體大小單位，不同的是rem相對的是HTML根元素.
常見的用法：
html {font-size: 62.5%;/10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem;/1.4 × 10px = 14px /}
h1 { font-size: 2.4rem;/2.4 × 10px = 24px/}

GPU云服務器云服務器 px2rem px 設計淺談淺談javascript

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

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

淺談<em>pxem>,em與rem

摘要：關于表示像素計算機屏幕上的一個點，是絕對單位，不會因為其他元素的尺寸變化而變化關于任意瀏覽器的默認字體高都是。有如下特點的值并不是固定的會繼承父級元素的字體大小。避免字體大小的重復聲明。所有未經調整的瀏覽器都符合。關于px px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化關于em 任意瀏覽器的默認字體高都是16px。所...

econi 2019-08-01 16:39 評論0 收藏0
移動web開發淺談之那些我們需要知道的基礎

摘要：正文概念本次要談的移動不是，只是很普通的移動端的界面。默認行為作為之前開發端的人員，第一反應就是如何把那么大的界面內容展現到手機小小的屏幕上。就是在顯示多行文字的時候，可能需要在自己期望顯示多少行之后，省略后面的文字，然后以。。。前言開發生涯總是豐富多采，工作多年，不同領域還是逃不過雨露均沾，之前開發過android，微信，ios，web網站也玩過。但是對于移動web這一塊，確實沒...

stackfing 2019-08-29 11:02 評論0 收藏0
淺談CSS calc()函數的用法

摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數提供了更好的解決方案。當使用預處理器做數學運算時，給定值為表達式的結果。使用函數可以用來對數值屬性執行四則運算。函數的計算值如下所示降級方案已經得到普遍支持。 CSS3 的 calc() 函數允許我們在屬性值中執行數學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。 .foo { w...

leeon 2019-08-30 11:04 評論0 收藏0
淺談CSS calc()函數的用法

摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數提供了更好的解決方案。當使用預處理器做數學運算時，給定值為表達式的結果。使用函數可以用來對數值屬性執行四則運算。函數的計算值如下所示降級方案已經得到普遍支持。 CSS3 的 calc() 函數允許我們在屬性值中執行數學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。 .foo { w...

nidaye 2019-08-02 15:14 評論0 收藏0
淺談CSS calc()函數的用法

摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數提供了更好的解決方案。當使用預處理器做數學運算時，給定值為表達式的結果。使用函數可以用來對數值屬性執行四則運算。函數的計算值如下所示降級方案已經得到普遍支持。 CSS3 的 calc() 函數允許我們在屬性值中執行數學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。 .foo { w...

jackwang 2019-08-23 17:57 評論0 收藏0