第四章：數值與單位（3）

第 11 屆 iThome 鐵人賽

DAY 14

Modern Web

CSS大全閱讀筆記系列第 14 篇

11th鐵人賽

Camellus

2019-09-30 23:49:43

650 瀏覽

（接上篇的距離部分）

距離：
c. 解析度單位：
- 因為媒體查詢（media query）和響應式設計的出現，為了能夠描述螢幕解析度，孕育而生的單位類型。
- 每英吋點數（dpi）：每英吋顯示的顯示點個數，其中顯示點可以是印表機的點、螢幕設備實際的像素等顯示單元。
- 每公分點數（dpcm）：類似於dpi，但以每公分顯示的顯示點個數計算。
- 每像素單位點數（ddpx）：在CSS3中，1dppx=96dpi，但未來CSS版本可能會改變比例。
d. 相對長度單位：
- 相對長度是相對於其他基準而來的，因此實際距離會因為自身無法控制的外因而改變（如螢幕解析度、埠寬度、使用者偏好設定等），而以其他元素為基準值的相對長度單位，就算是同等長度也會因對應元素而變化。
- em與ex：em單位在定義字型大小時，會以親代元素為基準值，但在定義其他部分時，則是以該元素的字型大小為基準，因此當<p>的字體大小為14px，設定padding: 1em;時，padding寬度為14px，而<h1>...<span>...</span>...</h1>中，設定h1{font-size: 20px;} span{font-size: 0.5em};，<span>的字體大小為10px，em的單位是<number>或百分比。em和ex是關係密切，其中em是以所用字型裡的m為1em的寬度，ex是以所用字型裡中的x作為1ex的基準高度，因此相同em不同字型的文字，ex會不同。
- rem：em和rem很相似，都是以元素宣告字型的大小為基礎，單位是<number>或百分比。但不同於em以元素本身的字型大小為基準（em中的font-size以親代元素為基準），rem則統一以根元素（<html>）的字型大小作為度量的基準，因此當沒有特別設定時，1rem會等於使用者所預設的字體大小的100%，如果使用者預設字體大小為16px，1rem就會等於16px。
- ch：CSS3加入，以使用字型中0的步進寬度為計量單位，步進寬度是指字元開始到下個字元開始之間的距離，通常包含字元本身與兩側的間距（間距可為負值），另外，除了等寬字型，每個字型不一定會與0相等。
- 視埠相關單位：這類單位是以視埠（瀏覽器視窗、可列印區域、行動裝置顯示範圍）的大小為基準計算而來，在填滿視埠的設計和行動裝置最為實用，不用再額外調整大小，當視埠大小被調整時（如瀏覽器視窗被縮放），就會隨之調整大小。視埠為基準的單位，有視埠寬度單位（vw）、視埠高度單位（vh）、視埠最小單位（vmin）、視埠最大單位（vmax）四種，vw以視埠寬度除以100而得，vh以視埠高度除以100而得，vmin是以視埠的寬和高各除以100後取最小值，vmax則是以視埠的寬和高各除以100後取其中的最大值。這些單位可以被用在任何允許長度單位的地方，如font-size、margin等，且不會受到座標軸的限制，所以vw可以用在高度，vh用在寬度也沒有任何問題。在支援度上，注意vmax和vmin的支援度，vh和vw支援度更高一些。