在css中,尺寸單位分為兩類:相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素,又可以分為字型相對單位和視窗相對單位。字型相對單位有:em、ex、ch、rem;視窗相對單位有:vw、vh、vmin、vmax幾種。絕對長度單位則是固定尺寸,它們採用的是物理度量單位:cm、mm、in、px、pt以及pc。但在實際應用中,我們使用最廣泛的則是em、rem、px以及百分比(%)來度量頁面元素的尺寸。
px:為畫素單位。它是顯示屏上顯示的每一個小點,為顯示的最小單位。它是一個絕對尺寸單位,是不能變動的;
em:它是描述相對於應用在當前元素的字型尺寸,所以它也是相對長度單位,可以變動。一般瀏覽器字型大小預設為16px,則2em == 32px;
rem:它是描述相對於當前根元素字型尺寸,除了描述物件與em不同其餘都和em一樣。
%: 百分比,它是一個更純粹的相對長度單位,可以變動。它描述的是相對於父元素的百分比值。如50%,則為父元素的一半。
px
px畫素,是絕對長度單位的一種,它的大小是根據使用者螢幕顯示器的解析度決定的(因此不同的裝置顯示相同的畫素值也可能會有不同的結果)。
px特點
如果網頁設計人員使用px作為字型單位,那麼其字型大小將不能被更改。
em
em是相對長度單位,相對於應用當前文字的字型尺寸。如果當前文字的字型尺寸未被定義,則相對於瀏覽器的預設字型尺寸。
em的特點
1.em的值並不是固定不變的。
2.em會繼承父級元素字型的大小
em單位轉化為畫素值
本例是使用chrome的版本為52.0.2743.116,
首先任意瀏覽器在預設狀態下的字型大小都是16px,都符合1em = 16px;
在 選單欄-設定-顯示高階設定-網路內容-自定義字型 中可查和更改自己瀏覽器的預設字型大小,
接下來我們來做一個簡單的轉換,
在預設字型大小情況下,1em = 16px,那麼0.625em=10px。
這樣的話,為了簡化font-size的換算,我們在根元素中設定font-size:62.5%,
那麼我們寫1em,通過擴大0.625倍就相當於10px,也就是1em = 10px,有了這個換算公式就可以輕鬆的把原本的px換算為em單位了。
原因如下:chrome中文版預設最小字元值12px,chrome英文版預設最小字元值10px。
不過這並不影響公式的實用性,因為12px也是一個相對較小的字型了,在ie10不存在這樣的問題。
弄懂了在哪兒修改預設字型的大小,以及px和em的基本關係,接下來再說一說em的繼承特點。
em是相對當前文字的字型尺寸,也就是說當前文字的字型尺寸也可能是相對於另一個文字的字型尺寸,這就存在繼承的關係了。
關於em就這麼多了。
rem
em是相對長度單位,相對於應用根元素的字型尺寸,除了和em的相對物件不同,em的其它特點都適用於rem。
比如:em和rem都是改變字型大小的相對長度單位,
1rem = 16px (預設條件下)。
rem的特點
rem是相對於根元素的字型尺寸,這一點和em不同。當em出現多重繼承的時候,字型的大小控制就會變得很麻煩,rem的出現就是為了克服這一缺點。
如果不做任何修改,瀏覽器預設字型的大小就是網頁根元素的字型大小,
如果要對網頁根元素字型大小進行修改,需要在標籤中加上style="font-size:value"屬性,
%
百分比是相對於父元素的尺寸。
%的特點
百分比是相對於父元素的尺寸,這和em(相對於當前元素的字型尺寸)以及rem(相對於根元素的字型尺寸)都不同。
**:
結果圖:
從圖上我們可以看出:設定5em的div的第一行字元剛好為5個字元大小,因為如上所說,它是相對於當前元素字型的尺寸, 寬度佔用90px,5 x 18 = 90px。設定5rem的div第一行字元要小一些,因為如上所說,它是相對於根元素字型大小(預設為瀏覽器大小16px),比18px要小一些,寬度佔用80px,5 x 16 = 80px。設定百分比顯示的第一行最大,因為如上所說,它是相對於父元素的尺寸比例, 寬度佔用160px,200 x 80% = 160px。
徹底弄懂css中單位px和em,rem的區別
國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點ie無法調整那些使用px作為單位的字型大小 國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 firefox能夠調整px和em,rem,但是96 以上的中國網民使用ie瀏覽器...
徹底弄懂css中單位px和em,rem的區別
px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引...
徹底弄懂css中單位px和em,rem的區別
國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民...