比較css中單位px,em和rem的區別

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

 

px特色css

1. IE沒法調整那些使用px做爲單位的字體大小;html

2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位;前端

3. Firefox可以調整px和em,rem,可是96%以上的中國網民使用IE瀏覽器(或內核)。html5

 

px像素(Pixel)。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)node

 

em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置,則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)web

  

       任意瀏覽器的默認字體高都是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做爲單位就好了。chrome

 


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。


rem特色 

        rem是CSS3新增的一個相對單位(root em,根em),這個單位引發了普遍關注。這個單位與em有什麼區別呢?區別在於使用rem爲元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身,經過它既能夠作到只修改根元素就成比例地調整全部字體大小,又能夠避免字體大小逐層複合的連鎖反應。目前,除了IE8及更早版本外,全部瀏覽器均已支持rem。對於不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是

 

 

 

一個例子:

p {font-size:14px; font-size:.875rem;}

注意: 

 

        選擇使用什麼字體單位主要由你的項目來決定,若是你的用戶羣都使用最新版的瀏覽器,那推薦使用rem,若是要考慮兼容性,那就使用px,或者二者同時使用。

 

作移動端頁面的幾乎離不開rem這個單位。REM表示「Root EM」,字面上指的是根元素的em大小。在Web文檔的上下文中,根元素就是你的html元素。若是沒有重置,html默認font-size:16px。

咱們能夠方便的使用相對字體大小,並且還避免了使用嵌套的em結構的混亂。

2、舉例

瀏覽器默認樣式一文中不少的默認樣式,單位都是用的em。

如今再拿其中一段默認樣式舉例。

複製代碼
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong          { font-weight: bolder }
複製代碼

能夠看出標題系列除了font-weight加粗外還有font-size設置和margin預留。如今就來看看h1的font-size和margin預留。

 

經過上圖能夠看出h1在默認狀況下,font-size:32px;margin-bottom:21.44px;這個值是怎麼來的呢?下面解答一下。

相對單位em是相對於元素自己的字體大小的。在css中惟一例外的是font-size屬性,它的em和ex值指的是相對父元素的字體大小。

看一下chrome中h1的這一段默認樣式

h1的默認font-size:2em,相對於父元素,這裏父元素body的font-size:16px;(默認值),因此計算一下獲得h1的font-size:32px。

除了font-size以外其餘屬性的em計算相對於元素自身字體大小。因此margin-bottom:0.67em計算值就是0.67*32px=21.44px了。

 

 

—————————————————————————————————————————————————————————————————————

 

關於em單位這裏還轉載了一篇博客

CSS中強大的EM

小編推薦:掘金是一個高質量的技術社區,從 ECMAScript 6 到 Vue.js,性能優化到開源類庫,讓你不錯過前端開發的每個技術乾貨。各大應用市場搜索「掘金」便可下載APP,技術乾貨盡在掌握中。

使用CSS也很久了,但一直都是在使用「px」來設置Web元素的相關屬性,未敢使用「em」。主要緣由是,對其並不什麼瞭解,只知道一點概念性的東西,前段時間在項目中要求使用「em」做爲單位設置元素,因此從頭對「em」學習了一回。稍爲有一點理解,今天特地整理了一份博文與你們一塊兒分享,但願對童子們有些許的幫助。

 

這篇教程將引導你們如何使用「em」來建立一個基本的彈性佈局,從而學習其如何計算?又是如何使用「em」對層進行彈性擴展?又是如何擴展文本和圖像等內容?下在咱們就一塊兒帶着這些問題開始今天的「em」之行。

什麼是彈性佈局?

用戶的文字大小與彈性佈局

用戶的瀏覽器默認渲染的文字大小是「16px」,換句話說,Web頁面中「body」的文字大小在用戶瀏覽器下默認渲染是「16px」。固然,若是用戶願意他能夠改變這種字體大小的設置,用戶能夠經過UI控件來改變瀏覽器默認的字體大小。

彈性設計有一個關鍵地方Web頁面中全部元素都使用「em」單位值。「em」是一個相對的大小,咱們能夠這樣來設置1em,0.5em,1.5em等,並且「em」還能夠指定到小數點後三位,好比「1.365em」。而其中「相對」的意思是:

  1.  相對的計算必然會一個參考物,那麼這裏相對所指的是相對於元素父元素的font-size。好比說:若是在一個<div>設置字體大小爲「16px」,此時這個<div>的後代元素教程了是將繼承他的字體大小,除非從新在其後代元素中進行過顯示的設置。此時,若是你將其子元素的字體大小設置爲「0.75em」,那麼其字體大小計算出來後就至關於「0.75 X 16px = 12px」;
  2.  若是用戶經過瀏覽器的UI控件改變了文字的大小,那麼咱們整個頁面也會進行放大(或縮小),不至於用戶改變了瀏覽器的字體後會導致整個頁面崩潰(我想這種現像你們都有碰到過,不信你就試試你本身製做過的項目,你會以爲很恐怖)。

你們能夠查看這個彈性佈局樣例。此時你使用瀏覽器的UI控件改變了文字的大小或者直接「ctrl + 」和「ctrl - 」,你會發現這個彈性佈局實例,在瀏覽器改變字體大小瀏覽會作出相應的放大和縮小,並不會影響整個頁面的佈局。注:這個實例的全部HTML和CSS在本教程中教程了都會使用到。

至於其餘的彈性佈局的實例,你們能夠瀏覽Dan CederholmSimplebites,並改變文字的大小去瀏覽。

體驗後,是否是以爲彈性佈局的頁面很靈活呀,並且也像「px」同樣的精確。所以,只要咱們掌握了「font-size」、「px」和「em」之間的基本關係,咱們就能夠民以食快速使用CSS建立精確的佈局。

CSS的Elastigirl引進EM

Elastigirl的「em」是極其強大和靈活的,他無論字體大小是什麼,是12px,16或60,他均可以計算出其值。

em其實就是一種排版的測試單位,並且他的由來還有一段小故事,關於這段小故事我就不和你們說了,由於你們都不是來聽我講故事的,我想大仍是喜歡知道他在CSS中的那些事。

在CSS中,「em」其實是一個垂直測量。一個em等於任何字體中的字母所須要的垂直空間,而和它所佔據的水平空間沒有任何的關係,所以:

若是字體大小是16px,那麼1em=16px

入門

在咱們開始來了解CSS中的這個「em」以前,咱們須要知道在瀏覽器下,他的默認字體大小。正好咱們前面也這樣作了,在全部現代瀏覽器中,其默認的字體大小就是「16px」。所以在瀏覽器下默認的設置將是:

1em = 16px

所以,在一個CSS選擇器被寫入時,瀏覽器就有了一個「16px」大小的默認字體。此時咱們Web頁面中的<body>就繼承了這個「font-size:16px;」,除非你在CSS樣式中顯式的設置<body>的「font-size」值,來改變其繼承的值。這樣一來,「1em = 16px」、「0.5em = 8px」、「10em = 160px」等等,那麼咱們也可使用「em」來指定任何元素的大小。

設置Body的font-size

不少前輩在多年的實踐中得出一個經驗,他們建議咱們在<body>中設置一個正文文本所需的字體大小,或者設置爲「10px」,至關於(「0.625em或62.5%」),這樣爲了方便其子元素計算。這兩種都是可取的。可是咱們都知道,<body>的默認字體是「16px」,同時咱們也很清楚了,咱們改變了他的默認值,要讓彈性佈局不被打破,就須要從新進行計算,從新進行調整。因此完美的設置是:

			body {font-size:1em;} 

但是在那個沒人愛的IE底下,「em」會有一個問題存在。調整字體大小的時候,一樣會打破咱們的彈性佈局,不過還好,有一個方法能夠解決:

			html {font-size: 100%;} 

公式轉換——PXtoEM

若是你是第一建立彈性佈局的,最好在身邊準備一個計算器,由於咱們一開始少不了不少的計算,有了他放心。

像素對於咱們來講太密切了,所以咱們也將從這開始。首先須要計算出1px和em之間的比例,而後是知道咱們須要的px值。經過前面的介紹,你們都知道1em老是等於父元素的字體大小,所以咱們徹底能夠經過下面的工式來計算:

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

你們能夠參考一下面這張轉換表(body字體爲16px時的值)

接下來咱們一塊兒看一個很簡單的實例「使用CSS的EM製做一個960px寬度的彈性佈局

HTML Markup

			<body> <div id="container"> …</div> </body> 

將960px轉換爲em

1 ÷ 16px × 960px = 60em

這個計算值的前提條件是<body>的「font-size:16px」。

CSS Code

			html { font-size: 100%; } body { font-size: 1em; } #container { width: 60em; } 

經過上面的實例,我想你們更能形像化的理解了,由於有例可詢,其實咱們能夠把上面的計算公式轉換一下,將更方便你的計算:

須要轉換的像素值 ÷ 父元素的font-size = em值

那麼咱們上面的實例「960px」就能夠這樣來轉換成「em」值

960px ÷ 16px = 60em

上面咱們一塊兒見證了「px」轉換成「em」的計算方式,接下來咱們一塊兒來動看製做上面展現過的彈性佈局樣例。下面咱們主要一塊兒來一步一步的實現他。

構建一個彈性的容器

要建立彈性佈局樣例那樣的居中效果,咱們首先須要建立一個HTML結構,我在此給建立一個<div>而且取名叫「wrap」

			<body> <div id="wrap"> content here</div> </body> 

咱們但願這個容器是一個「740px」寬,適合一個「800px × 600px」顯屏的實例。那麼「740px」會等於多少「em」呢?這就是咱們須要關心的問題,你們一塊兒來看吧:

一、將「740px」轉換成「em」設置到咱們的容器「div#wrap」:咱們都知道「div#wrap」的父元素<body>設置了字體爲「16px」,那麼此時在沒有進行另外顯示的設置時,他的子元素<div id="wrap">將繼承「font-size」值,這樣咱們就能夠輕意獲得:「1px和1em之間的關係」

1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em

這樣一來,咱們的「740px」就很容易的能轉換成「em」

0.0625em × 740 = 46.25em

固然你們也能夠按照咱們前面所列出的計算公式來進行轉換,這樣你心中更具備一個概念性,也不容易弄錯:

1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 須要轉換的像素值 = em值)

這樣一來,您可使用上面的公式計算出您須要的任何寬度或高度的「em」值,你只須要知道「1px等於多少em」,另外就是你要轉換的「px」值是多少,具有這幾個參數你就能獲得你想要的「em」值了。

二、建立CSS樣式:如今咱們能夠給「div#wrap」寫樣式了,彈性佈局樣例很明顯的告訴咱們,給「div#wrap」設置了一個寬度爲「740px」居中,帶有上下「margin」爲「24px」,並且帶有「1px」的邊框效果,那麼咱們首先根據上面的公式計算出相應的「em值」,而後在寫到CSS樣式中:

			html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em;/*740px ÷ 16 = 46.25em */ margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/ } 

如今咱們就輕鬆的建立了一個包含內容的彈性容器:彈性佈局樣例

文本樣式與em

首先咱們在前面那個建立的<div id="wrap"></div>中插入一個<h1>和一個<p>:

			<div id="wrap"> <h1>...</h1> <p>...</p> </div> 

彈性佈局樣例實例中,咱們標題使用了「18px」,而段落設置的是「12px」字體,同時其行高是「18px」。18px將是咱們實現彈性佈局的一個重要值,可使用他們都按正比變化。(有關於標題和段落的排版介紹,你們感興趣能夠點擊Richard Rutterbasic leadingvertical rhythm以及chapter on vertical motion的相關介紹)。

根據CSS繼承一說,咱們在「div#wrap」的內容容器中沒有顯式的設置字體大小,這樣整個「div#wrap」將繼承了其父元素「body」的字體——「16px」。

一、給段落設置樣式:——「12px」的字體,「18px」的行高以及margin值

CSS繼承中,咱們能夠得知咱們全部段落繼承了其父元素「div#wrap」的「font-size:16px」。同時咱們經過前面的介紹得知1px = 1 ÷ 16 = 0.0625em,這樣一來咱們就很輕鬆的知道「12px」等於多少個「em」

0.0625em × 12 = 0.750em

這樣咱們就能夠給段落p設置樣式:

			p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */} 

要計算出段落所需的行高和「margin」爲「18px」,來知足Richard Rutter說的basic leading,那咱們就須要像下面的方法和來計算:

18 ÷ 12 = 1.5em

使用所需的行高值「18px」直接除以「字體大小12px」,這樣就獲得了段落「p」的「line-height」值。在本例中行高就等於字體的「1.5」倍,接着咱們把「line-height」和「margin」樣式加到段落「p」中

			p{ font-size: 0.75em;/*0.625em × 12 = 0.750em */ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ } 

二、給標題設置一個18px的字號

標題「h1」和段落「p」同樣的原理,他也是繼承他父元素「div#wrap」的「16px」的「font-size」,因此咱們也是按一樣的方法能夠計處出他的「em」

0.0625em × 18 = 1.125em

咱們能夠把得出的值寫到CSS樣式表中

			h1 { font-size: 1.125em;/*0.625em × 18 = 1.125em*/ } 

一樣爲了保留Richard Rutter所說的vertical rhythm,咱們一樣將標題「h1」的「line-height」和「margin」都設置爲「18px」,使用方法前面介紹的方法。很容易獲得他們的「em」值爲「1em」:

			h1 { font-size: 1.125em; /*0.625em × 18 = 1.125em*/ line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */ } 

設置圖片大小——使用em

要作出彈性佈局樣例這樣的果,咱們也須要在html中插入一張圖片:

			<body> <div id="wrap"> <h1>....</h1> <p><img src="90.png" alt="" /> Lorem...</p> </div> </body> 

咱們這張圖片具備「90px」的寬和高,同時具備一個右邊距和底邊距爲「18px」設置,並且還進行左浮動。下面咱們就一塊兒來看其如何實現圖片這幾個樣式效果:

從HTML結構中,咱們很清楚的知道,圖片是段落「p」的子元素,經過前面的介紹,大家知道這個段落「p」的「font-size」值被得定義爲「12px」,所以咱們計算圖片的屬性值時,不能在按「1px = 0.0625em」或者「1em=16px」來計算,咱們須要使用最老的公式計算:

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

這樣一來,按上面所示的公式,咱們就能夠計算出圖片的大小:

1 ÷ 12 × 90 = 7.5em

如今你就能夠將計算出來的值寫到樣式中去:

			p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */ } 

咱們在段落中知道了「18px」恰好是「1em」,如今咱們也把他使用到圖片的樣式中:

			p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */ margin: 0 1.5em 1.5em 0; float: left; } 

這樣咱們就製做出一個和彈性佈局樣例同樣的效果。但願經過這樣的一個實例能幫助你們瞭解如何使用「em」來建立一個彈性佈局的方法。固然你們可能還在擔憂使用「em」來製做一個彈性佈局,不能像「px」同樣的的精確,若是你真正理解了這篇教程後,我想你不會在有這樣的想法。

彈性佈局的公式總結

最後我想你們確定和我會有同一種想法,就是相關參數是的「px」值如何成功並且正確的轉換成「em」值,通過上面的學習,我最後將公式總結一下:

元素自身沒有設置字號大小時,元素的width、height、line-height、margin、padding、border等值轉換都按下面公式轉換:

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

咱們來看一個實例:

			<body> <div id="wrapper">test</div> </body> 

咱們在body默認字體大小爲「16px」,此時須要「div#wrapper」的相關參數值爲:

			#wrapper { width: 200px; height: 100px; border: 5px solid red; margin: 15px; padding: 10px; line-height: 18px; } 

那麼咱們按照上面的公式,將所在參數進行轉換:

			#wrapper { width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 

咱們一塊兒來看計算出來的值:

接下來我須要你們在來看一個效果,這一點很關鍵喲,仔細看好,在一樣的參數基礎上稍加一條元素自己設置字體大小爲:14px;,你們能夠會說很簡單的呀,按前面的公式計算出來加上就是了,那麼我如今就按你們說的計算加上:

			#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 

此進咱們在firebug下看計算出來的layout值

爲了更好的說明問題,我把元素自身沒有設置字體大小和元素自身設置了字體大小,二者在firebug計算出來值:

我截這個圖的主要意圖是,說明一個問題就是元素自身要是設置了字體大小後,其計算公式就不在是前面所說的,咱們須要作一下修改:

一、字體計算公式依舊

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

二、其它屬性的計算公式須要換成

1 ÷ 元素的font-size × 須要轉換的像素值 = em值

那麼咱們如今來計算一回:

			#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/ height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/ border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/ margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/ padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/ line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/ } 

咱們在來看一次計算出來的值:

總結

長篇介紹了一大堆,惟一想告訴你們的是如下幾點

一、瀏覽器的默認字體大小是16px

二、若是元素自身沒有設置字體大小,那麼元素自身上的全部屬性值如「boder、width、height、padding、margin、line-height」等值,咱們均可以按下面的公式來計算

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

三、這一種千萬要慢慢理解,否則很容易與第二點混了。若是元素設置了字體大小,那麼字體大小的轉換依舊按第二條公式計算,也就是下面的:

1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

那麼元素設置了字體大小,此元素的其餘屬性,如「border、width、height、padding、margin、line-height」計算就須要按照下面的公式來計算:

1 ÷ 元素自身的font-size × 須要轉換的像素值 = em值

這樣說,不知道你們理解了整明白了沒有,若是沒有整明白,能夠回過頭來看上面的一個實例。

相關文章
相關標籤/搜索