【轉】【前端】CSS中強大的EM

時間 2019-11-12

標籤前端 css 強大欄目 CSS 简体版

原文原文鏈接

轉載自：http://www.w3cplus.com/css/px-to-emcss

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

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

什麼是彈性佈局？

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

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

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

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

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

至於其餘的彈性佈局的實例，你們能夠瀏覽Dan Cederholm的Simplebites，並改變文字的大小去瀏覽。學習

體驗後，是否是以爲彈性佈局的頁面很靈活呀，並且也像「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 Rutter的basic leading和vertical 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值*/
			}