[翻譯]解讀CSS中的長度單位，css長度

[翻譯]解讀CSS中的長度單位，css長度

測量，在WEB設計上是非常重要的。在CSS中有至少10種不同的測量單位。
每種單位都有其獨特的作用，使用它們，可以使頁面，在各種裝置上，很好的工作。一旦你熟悉了所有這些單位，你可以更準確地設定元素的大小了。這個教程中，我們將看看在CSS中，使用單位的不同，在什麼情況下使用什麼樣的單位，以及如何去使用它們。

絕對長度單位

絕對單位在物理世界真實測量的數字表示。這些單位不依賴於螢幕大小和解析度。結果就是，絕對長度單位不能很好地在數字裝置上使用，或解析度未知的情況下使用。這種單位更適合，為物理媒介設計時使用，如印刷。
絕對長度包括

• cm(厘米)

• mm(毫米)

• in(英寸)

• pc(派卡)

• pt(點)

• px(像素)

請注意，編輯版的規範草案還包括1/4毫米單位（q），這是個最新的單位，還沒有瀏覽器表示支援它。你可能注意當使用絕對長度時，在不同的螢幕上，特定單位對應的值是相同的。這是因為不同螢幕的DPI（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;      }

是運行情況
p { font-size: 2ex;}

單位ch，是根據‘o’字元的來定義的。1ch是通過測量字型中字元'o'來定義

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;}

圖示
<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;}

圖示：
<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
ch
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/