[翻譯]解讀CSS中的長度機關

測量，在WEB設計上是非常重要的。在CSS中有至少10種不同的測量機關。

每種機關都有其獨特的作用，使用它們，可以使頁面，在各種裝置上，很好的工作。一旦你熟悉了所有這些機關，你可以更準确地設定元素的大小了。這個教程中，我們将看看在CSS中，使用機關的不同，在什麼情況下使用什麼樣的機關，以及如何去使用它們。

絕對長度機關

絕對機關在實體世界真實測量的數字表示。這些機關不依賴于螢幕大小和分辨率。結果就是，絕對長度機關不能很好地在數字裝置上使用，或分辨率未知的情況下使用。這種機關更适合，為實體媒介設計時使用，如印刷。

絕對長度包括

cm(厘米)
mm(毫米)
in(英寸)
pc(派卡)
pt(點)
px(像素)

請注意，編輯版的規範草案還包括1/4毫米機關（q），這是個最新的機關，還沒有浏覽器表示支援它。你可能注意當使用絕對長度時，在不同的螢幕上，特定機關對應的值是相同的。這是因為不同螢幕的DPI（每英寸點數）存在差異。高分辨率的螢幕具有更高的DPI，進而使圖像或文字看起來更小。

絕對機關裡像素（px）使用最為廣泛。一像素點通常被了解為在螢幕上的一個點，但實際情況比這個複雜得多.它是最小的測量機關，通常作為其它機關的基準。

其它機關，像英寸，毫米，厘米，表示得是實體尺寸。

點（pt），表示1/72英寸

派卡（pc）,球1/6英寸。

下面一段CSS，使用了6種不同的絕對長度機關：

p {
        border-top: 0.5in solid blue;
        border-bottom: 18mm solid green;
        border-left: 1cm solid red;
        border-right: 40px solid black;
        letter-spacing: 0.4pc;
        font-size: 20pt;
      }

下圖是運作情況

相對長度機關

故名思意，沒有固定的值。它們的值都是相對于其它預定值或特征。相對機關，可以根據其它一些基本參數，為元素的提供合适的值，這些屬性如width,height,font-size等。

這些機關推薦在兩種場景下使用。

在你建立響應式頁面
在數字媒介上使用時提供

它們對應的值依賴于你設定的字型或螢幕視窗視圖的寬或高。

相對機關包括：

ex（x的高度）
ch（字元）
em（因列印em而得名，但不同）
rem（根字型）

下面看看它們的詳細情況

X-height(ex) 和字元（ch）機關

機關ex，很少用于開發。

1ex

等于使用字型中小寫字母 ' x ' 的大小。在英文中，大多數情況1ex差不多等于0.5em。但當你改變了字型，如下設定字型的高度可以相當于em：

p {
  font-size: 2ex;
}

機關ch，是根據‘o’字元的來定義的。

1ch

是通過測量字型中字元'o'來定義是根據‘0’字元的來定義的。

1ch

是通過測量字型中字元'0'來定義

（0是數字零）

p {
  margin: 2ch;
}

Em

機關em，等于父元素字型大小或基礎字型大小。如果你的父元素字型大小為20px，那麼在所有子元素中，1em=20px（譯者注：這裡元素本身不能設定字型大小）。子元素字型大小可以根據基礎字型大小來調整，值可以為小數。

使用em可以保證在一個固定的比例下，各種元素的字型大小。例如給父元素設定

font-size:50px

子元素的寬度為

2em

，相當于設定子元素的寬度為

100px

。同樣，設定子元素的

font-size:0.5em

時就相當于設定

font-size:25px

。（注意：當子元素同時定義了font-size和其它使用em的屬性時，此時的em是根據子元素本身的font-size來計算的）。

下面是示範：

<h1>機關em示例</h1>

<div class="parent">
  <p>父元素字型大小為 (20px)</p>
  <div class="child">
    <p>子元素字型大小設定為 (1.5em;換算為像素為：30px)</p>
  </div></div>

body {
  text-align: center;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;
}

.p {
  font-size: 14px;
  padding-top: 130px;
}

圖示

有時em在嵌套使用時，會出現一些錯誤。這是因為em值是取決于靠它最近的祖先元素，多層嵌套計算起來就比較麻煩。特别是當你要依賴根元素或某個祖先元素來計算值時。

下面是一個em，在嵌套時使用的例子。我們假設文檔中基礎字型大小為16像素（浏覽器的預設字型大小）

<h1>機關em，元素嵌套的示範</h1>

<p>下面使用div來嵌套，<br>它們的font-size:1.15em,但它們每一個計算值都在增大。<br>最後一個div裡放了一個span,并設定font-size:2em。</p>

<div>
  <p>font-size &ndash; 18.3999996185303px</p>
  <div>
    <p>font-size &ndash; 21.1599998474121px</p>
    <div>
      <p>font-size &ndash; 24.3339996337891px
        <br><br><span> font-size &ndash; 48.6679992675781px</span></p>
    </div>
  </div></div>

body {
  text-align: center;
  font-size: 16px;
  padding: 0 20px;
}

p, div {
  max-width: 800px;
  margin: auto;
  padding-bottom: 15px;
}

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

.p {
  font-size: 14px;
  padding-top: 130px;
}

圖示：

注意，在html中的嵌套元素都是獨立計算font-size大小的。

從上面的CSS中可以看出，所有div的font-size:1.15em，因為嵌套，它們每個對應的真實font-size是不同的。

Rem

上面嵌套元素中,em值的困擾。

機關rem，正好可以解決。rem的值總是等于根元素的font-size（html文檔中根元素為html）。下面是rem的一個例子。

<h1>rem示例</h1>

<p>下面使用div來嵌套，<br>它們的font-size:1.15rem,但它們每一個計算值都在增大。<br>最後一個div裡放了一個span,并設定font-size:2rem。</p>

<div>
  <p>font-size &ndash; 18.3999996185303px</p>
  <div>
    <p>font-size &ndash; 18.3999996185303px</p>
    <div>
      <p>font-size &ndash; 18.3999996185303px
        <br><br><span> font-size &ndash; 32px</span></p>
    </div>
  </div></div>

body {
  text-align: center;
}

div {
  font-size: 1.15rem;
}

span {
  font-size: 2rem;
}

.p {
  font-size: 14px;
  padding-top: 130px;
}

注意：嵌套還是存在，但并不影響font-size的計算。

視口相對長度機關

視口相對長度是根據視圖視窗或視口的寬和高來确定的。

視圖視窗或視口是螢幕可見區域或螢幕上的架構空間區域。

視口相對機關包括：

vw:視口寬度(viewport width)
vh:視口高度(viewport height)
vmin:視口寬度或高度，選擇小的那個
vmax:視口寬度或高度，選擇大的那個

vh和vw

vh主要取決于視口的高度，1vh等于視口高度的1%，這主要用在元素要根據視口高度進行縮放時。例如：如果視口高度為400px，1vh=400/100=4px，如果視口高為800px，1vh=8px

vw和vh相同，不過它是依賴于視口寬度的。

vmin和vmax

vmin和vmax是差不多的兩個機關，都是取決于視口寬度和高度的情況。vmin選取小的那個，vmax選取大的那個。對于1vmin,1vmax的值的計算和vw,vh相同。

浏覽器支援情況

em,ex,px,cm,mm,in,pt,pc

所有浏覽器都支援，包括舊的IE

Firefox, Chrome 27+, IE 9+, Safari 7+, and Opera 20+.

rem

所有現在浏覽器，及IE9+。需要相容小于IE9的情況，可以使用REM-unit-polyfill

vw,wh,vmin

Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. IE中支援的vmin不是标準文法。可以使用 vminpoly 或 use -prefix-free插件。

vmax

Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+.IE不相容，可以使用viewport-units-buggyfill進行相容。

總結

本教程簡單介紹了在CSS中可用的長度機關，包括一些新加入的機關（可用于響應布局和多裝置适配的）。在你的項目中使用過rem或視口機關嗎？有什麼自己的看法嗎？可以在下面評論提出你的想法及問題。

原文：A Look at Length Units in CSS

作者：Gajendar Singh

原文連結：https://www.sitepoint.com/look-at-length-units-in-css/

翻譯的文章，版權歸原作者所有，隻用于交流與學習的目的。

原創文章，版權歸作者所有，非商業轉載請注明出處，并保留原文的完整連結。