1. 程式人生 > >EM與PX的對應關係

EM與PX的對應關係

公式轉換——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”呢?這就是我們需要關心的問題,大家一起來看吧:

1、將“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”值了。

2、建立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 Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相關介紹)。

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

1、給段落設定樣式:——“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 */
			}  

2、給標題設定一個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 */
			}