CSS3 em && rem 詳細教程

時間 2020-07-25

標籤 css3 css rem 詳細教程欄目 CSS 简体版

原文原文鏈接

1css

# mobile css & rem & em & px

> 1 rem ===  16px

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

```css

* {
    box-sizing: border-box;
    /* margin: 0; */
    /* padding: 0; */
}
html{
    /* font-size: 16px; */
    /* default 16px === 1rem */
    font-size: 62.5%;
    /* 10px === 1rem */
}

```

1 em 實例code：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>em</title>
 6     <style>
 7         .container{
 8             /* div 絕對居中*/
 9             position: absolute;
10             top: 50%;
11             left: 50%;
12             margin-top: -5em;
13             margin-left: -14em;
14             border-radius: 10em;
15             border: 1px solid red;
16             font-size: 20px;
17             background-color: #0f0;
18             /*em = 20px*/
19         }
20         .em{        
21             font-size: 2em;
22             /* 相對於相對於父元素的font-size，因此2em = 2*20px = 40px */
23             /*em = 40px*/
24             height: 5em;
25             /* 相對於自己元素的font-size，因此5em = 5*40px = 200px */
26             width: 14em;
27             /* 相對於自己元素的font-size，因此14em = 14*40px = 560px */
28             background-color: #000;
29             color: #0f0;
30             opacity: 0.5;
31             /* IE8 and lower */
32             filter: alpha(opacity=50);            
33             /*文字水平居中：text-align*/
34             text-align: center;
35             /*文字垂直居中：line-height = height*/
36             line-height: 5em;
37         }
38     </style>
39 </head>
40 <body>
41     <!--
42         em表示字體相對長度單位,依據元素的font-size屬性的計算值;
43         若是用於font-size屬性自己，相對於父元素的font-size；
44         若是用於其餘屬性，相對於自己元素的font-size.
45     -->
46     <div class="container">
47         <p class="em">div絕對居中 && em字體大小</p>
48     </div>
49 </body>
50 </html>

1web

1 rem 實例code：瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>rem 兼容性: IE8- 不支持</title>
 6     <style>
 7         .html{
 8             font-size: 1rem;
 9             /* 瀏覽器默認字體大小爲16px，則1*16=16px，因此html根元素字體大小爲16px */
10             /*1rem = 16px*/
11         }
12         .container{
13             /* div 絕對居中*/
14             position: absolute;
15             top: 50%;
16             left: 50%;
17             margin-top: -10rem;
18             margin-left: -20rem;
19             border-radius: 15em;
20             border: 1px solid red;
21             font-size: 1rem;
22             background-color: #0f0;
23         }
24         .rem{
25             font-size: 2rem;
26             /* 相對於html根元素的font-size，因此2rem = 2*16px = 32px */
27             /* rem = 16px*/
28             height: 20rem;
29             /* 相對於自己元素的font-size，因此10rem = 120*16px = 320px */
30             width: 40rem;
31             /* 相對於自己元素的font-size，因此20rem = 40*16px = 640px */
32             background-color: #000;
33             color: #0f0;
34             opacity: 0.5;
35             /* IE8 and lower */ 
36             filter: alpha(opacity=50);             
37             /*文字水平居中：text-align*/
38             text-align: center;
39             /*文字垂直居中：line-height = height*/
40             line-height: 20rem;
41         }
42     </style>
43 </head>
44 <body>
45     <!--rem是相對於根元素html的font-size屬性的計算值-->
46     <div class="container">
47         <p class="rem">div絕對居中 && rem字體大小</p>
48     </div>
49 </body>
50 </html>

1ide

1工具

1佈局

1post

http://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984開發工具

http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984?ec_unit=translation-info-language字體

綜合指南: 什麼時候使用 Em 與 Rem

你可能已經很熟練使用這兩個靈活的單位，但你可能不徹底瞭解什麼時候使用 rem ，什麼時候使用 em。本教程將幫你弄清楚!

Em 和 rem都是靈活、可擴展的單位，由瀏覽器轉換爲像素值，具體取決於您的設計中的字體大小設置。若是你使用值 1em 或 1rem，它能夠被瀏覽器翻譯成從16px到 160px 或其餘任意值。

CSS 邊距設置爲 1em瀏覽器翻譯成16pxCSS padding設爲 16px瀏覽器翻譯成160px

另外一方面，瀏覽器使用 px 值，因此 1px 將始終顯示爲徹底 1px。

滑動滑塊試試這個 CodePen 例子，你能夠看到rem 和 em 單位的值能夠轉化爲不一樣的像素值，而 px 單位保持固定大小:

最大的問題是

使用 em 和 rem 單位可讓咱們的設計更加靈活，可以控制元素總體放大縮小，而不是固定大小。咱們可使用這種靈活性，使咱們在開發期間，能更加快速靈活的調整，容許瀏覽器用戶調整瀏覽器大小來達到最佳體驗。

Em 和 rem 單位提供的這種靈活性和工做方式都很類似，因此最大的問題是，咱們什麼時候應使用 em 值，什麼時候應使用 rem 值呢?

主要區別

Em 和 rem 單位之間的區別是瀏覽器根據誰來轉化成px值理解這種差別是決定什麼時候使用哪一個單元的關鍵。

咱們要經過複習 rem 和 em 單位如何工做，來確保你知道每個細節。而後我會講到爲何你應該使用 em 或 rem 的單位。

最後，咱們會看看到底哪些典型元素的設計，你應該在實際應用中使用哪一種類型的單位。

rem 單位如何轉換爲像素值

當使用 rem 單位，他們轉化爲像素大小取決於頁根元素的字體大小，即 html 元素的字體大小。根元素字體大小乘以你 rem 值。

例如，根元素的字體大小 16px，10rem 將等同於 160px，即 10 x 16 = 160。

CSS padding設置爲 10rem計算結果爲160px

em 單位如何轉換爲像素值

當使用em單位時，像素值將是em值乘以使用em單位的元素的字體大小。

例如，若是一個 div 有 18px 字體大小，10em 將等同於 180px，即 10 × 18 = 180。

CSS padding設置爲 10em計算到 180px (或接近它)

重點理解:

有一個比較廣泛的誤解，認爲 em 單位是相對於父元素的字體大小。事實上，根據W3標準，它們是相對於使用em單位的元素的字體大小。

父元素的字體大小能夠影響 em 值，但這種狀況的發生，純粹是由於繼承。讓咱們看看爲何以及如何起做用。

Em 單位的遺傳效果

使用 em 單位存在繼承的時候，狀況會變得比較棘手，由於每一個元素將自動繼承其父元素的字體大小。繼承效果只能被明確的字體單位覆蓋，好比px,vw

使用 em 單位的元素字體大小根據它們來定。但該元素可能繼承其父元素的字體大小，而父元素又繼承其父元素的字體大小，等等。所以，以 em 爲單位的元素字體大小可能會受到其任何父元素的字體大小影響。

讓咱們看看一個例子。在下面的 CodePen單步執行試試。隨着你的前進，使用 Chrome 開發工具或 Firebug 爲火狐瀏覽器來檢查咱們的 em 單位計算到的像素值。

Em 繼承的例子

若是咱們的根元素字體大小爲 16px (一般是默認值) 一個子元素 div 裏面padding值爲 1.5em，該 div 將從根元素繼承字體大小 16px。所以padding會翻譯成 24px，即 1.5 x 16 = 24。

若是咱們加多一個div來包裹原先的div，而後設置其字體大小爲 1.25em呢?

咱們包裹的 div 繼承根元素字體大小 16px ，並乘以它本身的 1.25em 的字體大小。這將設置包裹 div 字體大小爲 20px，即 1.25 x 16 = 20。

如今咱們原始的 div 再也不直接從根元素繼承,而是從其新的父元素繼承字體大小爲 20px 1.5em 其padding值如今等於 30px，即 1.5 x 20 = 30。

這個繼承效應能夠更復雜，若是咱們向咱們原始的 div 添加 em 字體單位，比方說 1.2em。

Div 從其父級繼承 20px 字體大小，而後，乘以它本身的 1.2em 設置，給它 24px，即 1.2 × 20 = 24 新字體大小。

div上的1.5em padding 如今將再次改變大小，用新的字體大小，36px，即 1.5 × 24 = 36 。

最後，爲了進一步說明那個 em 單位是相對於他們最終得到(不是父元素)的字體大小，讓咱們來看看設置padding 1.5em 若是咱們顯式設置 div 使用 14px值，不繼承字體大小會發生什麼。

如今，咱們的padding爲 21px，即 1.5 x 14 = 21 已經變小了。它不受父元素的字體大小。

因爲存在着這些隱患，你能夠看到爲何必須知道如何正確管理使用 em 單位。

瀏覽器設置 HTML 元素字體大小的影響

默認狀況下瀏覽器一般有字體大小 16px，但這能夠被用戶更改成從 9px 到 72px的任何值

你須要知道的:

根 html 元素將繼承瀏覽器中設置的字體大小，除非顯式設置固定值去覆蓋。

因此 html 元素的字體大小雖然是直接肯定 rem 值，但字體大小可能首先來自瀏覽器設置。

所以瀏覽器的字體大小設置能夠影響每一個使用 rem 單元以及每一個經過 em 單位繼承的值。

沒有設置 HTML 字體大小時，瀏覽器設置起做用

除非重寫，不然它將繼承瀏覽器默認設置的字體大小。例如，讓咱們把網站的html元素沒有設置font-size值。

若是用戶讓他們的瀏覽器默認字體大小爲 16px，那麼根元素字體大小將爲 16px。在 Chrome 開發工具下，你能夠在已計算選項卡下看到一個元素繼承的屬性。

在這種狀況下 10rem 等於 160px，即 10 x 16 = 160。

若是用戶將其瀏覽器中的默認字體大小調爲18px，根字體大小變成 18px。如今 10rem 轉換爲 180px，即 10 × 18 = 180。

瀏覽器將調整使用 em 單位的 HTML 元素字體大小

當 em 單位設置在 html 元素上時，它將轉換爲em值乘以瀏覽器字體大小的設置。

例如，若是網站的 html 元素的字體大小屬性設置爲 1.25em，根元素字體大小將爲 1.25 倍的瀏覽器的字體大小設置。

若是瀏覽器字體大小被設置爲 16px，根字體大小會出來爲 20px，即 1.25 x 16 = 20。

在這種狀況下 10rem 將等於 200px，即 10 × 20 = 200。

因此，若是瀏覽器字體大小被設置爲 20px，根元素字體大小會翻譯成 25px，即 1.25 × 20 = 25。

如今 10rem 將等於 250px，即 10 × 25 = 250。

總結與 rem 差別 em

上述全部歸結以下:

rem 單位翻譯爲像素值是由 html 元素的字體大小決定的。此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。

em 單位轉爲像素值，取決於他們使用的字體大小。此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。

爲何使用 rem 單位:

Rem 單位提供最偉大的力量並不只僅是他們提供一致尺寸而不是繼承。相反，它給咱們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，再也不是使用固定的 px 單位。

爲此，使用 rem 單位的主要目的應該是確保不管用戶如何設置本身的瀏覽器，咱們的佈局都能調整到合適大小。

一個站點最初設計能夠專一於最多見的默認瀏覽器中字體大小 16px。

瀏覽器字體大小 16px

可是，經過使用 rem 單位，若是用戶調整其字體大小，咱們也能保證佈局的完整性，使用較小的文本避免文本空間被壓扁了。

瀏覽器字體大小 34px

若是用戶縮小其字體大小，整個佈局掉下來，空白區域中的文本也不會想得很無力。

瀏覽器字體大小 9px

用戶會由於各類各樣的緣由更改字體大小設置。容納這些設置能夠得到更好的用戶體驗。

重要的是:

一些設計師使用結合 rem 單位的方式給html元素設置了一個固定的px單位。這是很廣泛的作法，因此改變html元素的字體大小時，可使整個頁面作相應調整

我強烈反對種作法，由於它重寫繼承了用戶設置的瀏覽器字體大小。更誇張的說，這剝削了用戶自行調整以得到最佳視覺效果的能力。

若是您確實須要更改 html 元素的字體大小，那麼就使用em，rem單位，這樣根元素的值還會是用戶瀏覽器字體大小的乘積。

這將容許您經過更改您的 html 元素的字體大小，調整你的設計，但仍會保留用戶的瀏覽器設置的效果。

爲何使用 em 單位

em 單位取決於一個font-size值而非 html 元素的字體大小。

爲此，em 單位的主要目的應該是容許保持在一個特定的設計元素範圍內的可擴展性。

例如，您可能使用em 值設置導航菜單項的padding、 margin，line-height等值。

帶有0.9rem 字體大小的菜單

經過這種方式，若是您更改菜單的字體大小菜單項周圍的間距將在剩餘的空間按比例縮放。

帶有1.2rem 字體大小的菜單

前面一節中你看到跟蹤 em 單位如何變得不可收拾。爲此，我建議只在你標識清楚的狀況下使用 em 單位。

實際應用

一些 web 設計師之間存在辯論，我相信不一樣的人有不一樣的首選的方法，但個人建議是，以下所示。

使用 em 單位:

根據某個元素的字體大小作縮放而不是根元素的字體大小。

通常來講，你須要使用 em 單位的惟一緣由是縮放沒有默認字體大小的元素。

根據咱們上面的例子，設計組件好比按鈕，菜單和標題可能會有本身明確的字體大小。當你修改字體大小的時候，你但願整個組件都適當縮放

通用屬性這一準則將適用於在非默認字體大小的元素上的padding、 margin、 width、 height和line-height等值。

我建議，當您使用 em 單位，他們使用的元素的字體大小應設置對rem單位，以保留的可擴展性，但避免繼承混淆。

一般不使用 em 單位控制字體大小

咱們常常會看到使用em做爲字體大小單位，特別是標題，當我認爲若是使用rem將更具可擴展性。

標題常用 em 單位的緣由是他們相比px單位，在相對常規文本大小方面更出色。然而 rem 單位一樣也能夠實現這一目標。若是 html 元素上任何字體大小調整，標題大小仍會縮放。

請嘗試更改下面的 CodePen，看看 html 元素上的 em 字體大小如何起做用:

少部分狀況下，咱們不想咱們的字體大小根據根元素作調整，只有幾個例外的狀況。

咱們能夠想到的例子是一個使用 em 字體大小的下拉菜單，咱們有第二個級別的菜單項文本大小取決於第一級字體大小。另外一個例子多是用在按鈕裏面的字體圖標，字體圖標的大小跟按鈕的文本大小有關。

然而，大多數 web 設計中的元素每每不會有這種類型的要求，因此通常使用 rem 單位的字體大小，em 單位只在特殊的狀況下使用。

使用 rem 單位:

不須要 em 單位，而且根據瀏覽器的字體大小設置縮放的任何尺寸。

這幾乎在一個標準的設計中佔據了一切，包括heights，widths，padding，margin，border，font-size，shadows，幾乎包括你佈局的每部分。

簡單地說，一切可擴展都應該使用 rem 單位。

小貼士

建立佈局時，每每要以像素爲單位更方便，但部署時應使用rem單位。

你可使用預處理好比Stylus / Sass / Less，來自動轉換單位或PostCSS之類的插件。

或者，您可使用 PXtoEM 手動作您的轉換。

始終使用 rem 單位作媒體查詢

特別注意，當使用 rem 單位建立統一可擴展的設計，媒體查詢也應該是rem單位。這將確保，不管用戶瀏覽器的字體大小，您的媒體查詢會對它做出反應和調整您的佈局。

例如，若是用戶縮放文本很是高，您的佈局可能須要從兩列到單個列調整，由於它可能會在較小的移動設備上顯示。

若是您的斷點在固定的像素寬度，只有不一樣的視口的大小能夠觸發它們。可是基於 rem 的斷點他們將響應不一樣的字體大小。

不要使用 em 或 rem :

多列布局

佈局中的列寬一般應該是 %，所以他們能夠流暢適應沒法預知大小的視區。

然而單一列通常仍然應使用 rem 值來設置最大寬度。

例如:
.container {
    width: 100%;
    max-width: 75rem;
}
這保持列的靈活，可擴展。又能防止變得太寬了。

當元素應該是嚴格不可縮放的時候

在一個典型的 web 設計的過程當中，不會有不少部分的你不能使用伸縮性設計的佈局。不過偶爾你會遇到真的須要使用顯式的固定的值，以防止縮放的元素。

採用固定的尺寸值的前提應該是，若是被縮放的話，它的結構會被打碎。這真的不常出現，因此你想拿出那些 px 單位以前，問問本身是否使用它們是絕對必要的。

總結

讓咱們以一個快速符號點歸納咱們介紹的內容:

rem 和 em 單位是由瀏覽器基於你的設計中的字體大小計算獲得的像素值。

em 單位基於使用他們的元素的字體大小。

rem 單位基於 html 元素的字體大小。

em 單位可能受任何繼承的父元素字體大小影響

rem 單位能夠從瀏覽器字體設置中繼承字體大小。

使用 em 單位應根據組件的字體大小而不是根元素的字體大小。

在不須要使用em單位，而且須要根據瀏覽器的字體大小設置縮放的狀況下使用rem。

使用rem單位，除非你肯定你須要 em 單位，包括對字體大小。

媒體查詢中使用 rem 單位

不要在多列布局中使用 em 或 rem -改用 %。

不要使用 em 或 rem，若是縮放會不可避免地致使要打破布局元素。

我但願你如今已經創建了強健的、完整的圖片，到底 em 和 rem 的單位如何工做，並經過，知道如何最好地利用他們在你的設計中。

我鼓勵您嘗試爲你本身使用本教程指南，它們會爲您建立徹底成熟的可伸縮性和響應性佈局。

https://css-tricks.com/confused-rem-em/

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent,

rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design.

As in, scale the type in that specific area relatively.

I have tended to like rem because of the ability to scale type across the entire page easily, but I've gotten into issues where that wasn't good enough control so I could see moving back to em for that reason.

Direct Link → https://j.eremy.net/confused-about-rem-and-em/

February 24, 2014

Confused About REM and EM?

REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.

Relative Units

Both rem and em are relative units, px is not.

Before considering rem, it’s important to understand the relationship between em, markup and inheritance.

Below, the example demonstrates how each nested child assumes the parent is1em(100%).

Thus children inherit size by scaling in relation to the parent font size.

EM values inherit from their parent

PX values do not inherit

Visit pxtoem.com for conversion tables and calculator.

While the value remains 0.773em, the actual font size is calculated at 77.3% of its direct parent, which in turn scales from its parent. This continues up the DOM tree whenever a parent has a defined font-size.

In the example, several elements, each with a font size, are nested for a visual effect. You can see it’s not a good practice, because the compound inheritance creates unwanted results. However, you shouldn’t have to worry about this if your CSS and markup are modular to begin with.

Save Lives with EM

You can choose a different ratio/scale and calculate your own values on Type Scale.

Well, maybe not lives, but it will save lines … of code. The following examples do the same thing; update font sizes and padding within a media query. The initial values are calculated by incrementing 1em(16px) at a 1:1.2 ratio.
EM scales by updating one value
html { font-size: 1em; }

h1 { font-size: 2.074em; }

h2 { font-size: 1.728em; }

h3 { font-size: 1.44em; }

h4 { font-size: 1.2em; }

small { font-size: 0.833em; }

.box { padding: 1.25em; }

@media screen and (min-width: 1400px) {
  html { font-size: 1.25em; }
}
Or, recalculate every PX value
html { font-size: 16px; }

h1 { font-size: 33px; }

h2 { font-size: 28px; }

h3 { font-size: 23px; }

h4 { font-size: 19px; }

small { font-size: 13px; }

.box { padding: 20px; }

@media screen and (min-width: 1400px) {
  html { font-size: 20px; }

  h1 { font-size: 41px; }

  h2 { font-size: 35px; }

  h3 { font-size: 29px; }

  h4 { font-size: 24px; }

  small { font-size: 17px; }

  .box { padding: 25px; }
}
There’s only one em value to overwrite in the media query, because em inherits and scales relative to its parent (html in this case) font size, similar to the way vector paths scale proportionally.

The code is nearly doubled when updating px, because each value has to be recalculated and defined in the media query.

REM as in Root EM

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.

For example, if you’re trying to achieve consistent spacing without extra markup, rem can be used to define the padding and margins.

EM will scale padding and margins too

Use REM for consistent padding and margins

PX can be used for consistent padding and margins too, but it doesn’t scale across media queries like em and rem.

Conclusion

I use em for nearly everything, rem occasionally for padding or margins, but only in a pinch, and px some times for borders.

For the most part, I want children to inherit size. If a sidebar is going to be a smaller font size, then I expect all its children to resize proportionally without having to calculate and redefine individual selectors.

I struggle to think of a good reason to use rem for font-size values, but I’m sure there are exceptions. If I’m trying to reset a font size with rem, it’s probably a sign my CSS is not very modular and due for a refactor. ∎

Resources

My favorite em calculator is pxtoem.com. In addition to calculating em or px values, there’s a handy table of the two which really helps to see the relationship.

REM is the same as em except it’s always calculated from the html font size. So, just use the same pxtoem.comcalculator to figure out its relation to the root size.

Article in Español: ¿Te confunden REM y EM?

Article in Italian: Sei confuso su REM ed EM?

http://www.w3cfuns.com/notes/18191/edca35cae47706cd7ca3d8d7945b7eae.html

css中的單位px和em,rem之間的區別

px像素(Pixel)，相對長度單位，像素px是相對於顯示器屏幕分辨率而言的。
px的特色：
1.IE沒法調整那些使用px做爲單位的字體大小；
2.Fixefox可以調整px和em,rem，可是96%以上的中國網名使用的是IE瀏覽器(或內核)。

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數值，避免字體大小的重複聲明。

rem是CSS3新增的一個相對單位(root em,根em)，這個單位引發了普遍關注。這個單位與em的區別在於使用rem爲元素設置字體大小時，任然是相對大小，但相對的只是HTML根元素。這個單位可一說是集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就能夠實現成比例的調整全部字體大小，又可避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持的瀏覽器，應對方法也比較簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
例如：p{font-size:14px;font-size:875rem;}

選擇什麼單位主要仍是由項目的需求來決定。

http://www.cnblogs.com/xiaohuochai/p/5485683.htm

深刻理解CSS中的長度單位

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>em</title> <style> .container{ /* div 絕對居中*/ position: absolute; top: 50%; left: 50%; margin-top: -5em; margin-left: -14em; border-radius: 10em; border: 1px solid red; font-size: 20px; background-color: #0f0; /*em = 20px*/ } .em{ font-size: 2em; /* 相對於相對於父元素的font-size，因此2em = 2*20px = 40px */ /*em = 40px*/ height: 5em; /* 相對於自己元素的font-size，因此5em = 5*40px = 200px */ width: 14em; /* 相對於自己元素的font-size，因此14em = 14*40px = 560px */ background-color: #000; color: #0f0; opacity: 0.5; /* IE8 and lower */ filter: alpha(opacity=50); /*文字水平居中：text-align*/ text-align: center; /*文字垂直居中：line-height = height*/ line-height: 5em; } </style></head><body>  <div class="container"> <p class="em">div絕對居中 && em字體大小</p> </div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。