沒有 CSS 絕對單位這樣的東西
已發表: 2022-03-10當我們開始學習 CSS 時，我們發現 CSS 的度量單位被分類為相對或絕對。 絕對單位植根於物理單位，例如像素、厘米和英寸。 但多年來，CSS 中的所有絕對單位都失去了與物理世界的聯繫，變成了不同種類的相對單位，至少從 Web 的角度來看是這樣。
需要注意的是，相對單位和絕對單位之間仍然存在顯著差異。 CSS 相對單位的大小根據父元素定義的其他樣式定義或受父容器大小的影響。 至於絕對單位，我們將深入了解它們如何受到其他因素的影響，例如屏幕和設備的操作系統。
相對單位包括% 、 em 、 rem 、視口單位（ vw和vh ）等單位。 最常見的絕對單位是像素 ( px )。 除此之外，我們還有厘米單位 ( cm ) 和英寸單位 ( in )。
現在，讓我們探討一下為什麼 CSS 絕對單位不是那麼絕對。
CSS 像素
像素一直是 CSS 中最常見的單位，可追溯到網絡之初。 在桌面屏幕的舊世界中，在我們還沒有智能手機之前，屏幕的像素總是等同於 CSS 像素。
例如，在 2007 年，最常見的桌面分辨率是1024 × 768像素。 那時，我們通常會給我們的網頁一個1000像素的固定寬度以適應整個頁面，而剩餘的像素將被保存為瀏覽器的滾動條。
智能手機屏幕
智能手機帶來了又一次悄然進化，開啟了高密度屏幕時代。 如果我們考慮 iPhone 12 Pro，其屏幕為1170像素寬，我們會將設備上的每3像素計為 CSS 中的1像素。
當我們在移動設備中調整大小時，我們根據 CSS 像素進行測量，而不是根據設備像素進行測量。 總結：
- CSS 像素是邏輯像素。
- 設備像素是真實的物理像素。
好的，但是桌面設備呢？ 他們仍然使用相同的舊像素計算嗎？ 讓我們談談那個。
2021 年的桌面屏幕
幾年後，高密度屏幕出現在筆記本電腦上。 2014 年的 MacBook 配備了第一款“視網膜”屏幕（視網膜是高密度的代名詞）。
如今，大多數筆記本電腦都有高密度屏幕。
讓我們考慮一下MacBook ：
- 13.3 英寸 MacBook Pro的屏幕寬度為
2560像素，但其表現類似於1440像素。 這意味著每1.778個物理像素就像1邏輯像素。 - 16 英寸 MacBook Pro的屏幕寬度為
3072像素，但其表現類似於1792像素。 這意味著每1.714個物理像素就像1邏輯像素。
在PC 筆記本電腦中，我測試了兩塊 15.6 英寸的屏幕，一個是全高清分辨率，另一個是 4K 分辨率。 結果很有趣：
- 15.6 英寸全高清屏幕的寬度為
1920像素，但其表現類似於1536像素。 這意味著每1.25個物理像素就像1邏輯像素。 - 15.6 英寸 4K 屏幕的寬度為
3840像素，但其表現同樣類似於1536像素。 這意味著每2.5個物理像素就像1邏輯像素。
如您所見，真實物理（即設備）像素和 CSS（即邏輯）像素之間的聯繫幾乎消失了。
多年來，屏幕變得越來越密集
過去，如果您仔細觀察屏幕，您實際上可以看到它的像素。 隨著屏幕技術的進步，製造商開始製造更高密度的屏幕。
推薦閱讀：可折疊網絡究竟意味著什麼？
為什麼我們以不同的方式計算邏輯像素？
多年來，隨著屏幕變得越來越密集，我們無法僅僅因為屏幕有更多的像素而在相同的屏幕尺寸中容納更多的內容。
想一想。 考慮一下三星 Galaxy S21 Ultra 。 其較窄的尺寸為1440物理像素。 我們可以輕鬆地將其安裝在常規桌面屏幕中。 但如果我們這樣做了，文本就會小到無法閱讀的程度。 因此，我們將物理像素與邏輯像素分開。
然後，CSS 中的大小（即寬度和高度）是根據 CSS 邏輯像素計算的。 當然，我們可以使用物理像素來加載高密度的內容，比如圖片和視頻，像這樣：
<img src="image-size-1200px.jpg" width="300" >好的，CSS 像素不等於設備的物理像素。 但是我們有厘米和英寸。 那些是連接到物理世界的物理單元，對吧？ 讓我們檢查一下。
CSS 英寸和 CSS 厘米
無論我們在哪裡使用英寸和厘米等物理單位，我們都知道這些是絕對單位。
我有一個想法，如果 CSS 像素不等於設備像素，那麼在網絡上使用英寸和厘米等物理單位可能是個好主意。 它們是絕對單位，對吧？
可以肯定的是，我測試了它。 我創建了一個寬度和高度為 1 厘米的盒子，並給它一個紅色的背景顏色。 我抓起一個真正的捲尺並得到一個驚喜：
CSS 厘米不等於物理厘米。
在這裡，我在 2019 年中期的 13 英寸 MacBook 上使用捲尺測試 CSS 厘米單位：
CSS 英寸的結果是相同的：
CSS 英寸不等於物理英寸。
皮卡 ( pc ) 和毫米 ( mm ) 單位也是如此。 這些對應於 CSS 英寸或 CSS 厘米的一部分，兩者都沒有連接到實際英寸或實際厘米。
為什麼 CSS 英寸和厘米不是真正的英寸和厘米
自 1980 年代以來，PC 市場已確定 CSS 英寸等於96像素。 這種像素計算直接與當時用於顯示器的微軟 Windows 操作系統的 DPI/PPI（每英寸像素數）標準相關聯，其中最常見的標準是96 DPI。
這意味著1 CSS 英寸總是等於96 CSS 像素。
至於 CSS 厘米，每厘米直接從英寸計算，也就是說1英寸相當於2.54厘米。 這意味著每1 CSS 厘米將始終等於37.7952756 CSS 像素。
換句話說： 1cm = 37.7952756px (96px / 2.54) 。
請參閱 Elad Shechter 的 Pen [CSS Real Dimensions!](https://codepen.io/smashingmag/pen/BaRJvWj)。
這個決定在 PC 行業開始時似乎是一個好主意（它有一種標準），結果證明是一個糟糕的決定，它會使 CSS 英寸和厘米變得過時和無用（至少從網絡）。
請注意，在 1980 年代，Apple 有不同的屏幕標準，即72 DPI。
屏幕像素變得更密集
正如我所提到的，這些年來屏幕的 DPI 變得越來越密集，我們看到了120到160 DPI 的屏幕。 而且因為1 CSS 英寸總是等於96 CSS 像素，這意味著現在 CSS 英寸不等於實際的物理英寸。
因為 CSS 英寸和 CSS 厘米是直接從 CSS 像素轉換而來的，而且這些年來屏幕獲得了更多的 DPI，所以我們已經到了這些單位不代表它們應該在屏幕上表示的東西的地步。
CSS 點單元
點 ( pt ) 單元是 CSS 中較少識別的單元之一。 正如維基百科所說：
“在排版中，點是最小的度量單位。 它用於測量打印頁面上的字體大小、行距和其他項目。”
維基百科頁面顯示了一個尺子，底部是點刻度，頂部是英寸刻度：
在我們了解為什麼這個單元不是網絡的絕對單元之前，讓我們回顧一下屏幕和打印機的基本單元。
PPI 和 DPI
我們已經提到過 DPI，您過去可能聽說過這些術語，但如果您從未了解它們的具體含義，這裡是快速入門：
- 生產者價格指數
屏幕由許多稱為像素的小光點構成。 為了測量像素密度，我們計算適合 1 英寸的像素數，稱為每英寸像素數 (PPI)。 - DPI
打印機打印彩色點。 為了表示打印機點的密度，我們計算適合 1 英寸紙張的點數，稱為每英寸點數 (DPI)。
簡而言之，這是衡量我們可以容納在 1 英寸內的視覺信息密度的兩種方法。
- PPI ：每英寸像素（用於屏幕）
- DPI ：每英寸點數（用於打印機）
值得一提的是， 1英寸中的 CSS 像素和點數同時用於寬度和高度。 這意味著在96 PPI 的屏幕上，一個高度和寬度為1英寸的框的總大小為9216像素（ 96 × 96像素 = 9216像素）。
這是1英寸屏幕為10 PPI的視覺演示：
下面是一些實際計算 CSS PPI 的例子：
| CSS 分辨率 （像素） | CSS PPI | CSS 英寸 （寬度和高度） |
|---|---|---|
| 96x96 | 96 | 1×1 |
| 141×141 | 141 | 1×1 |
屏幕的“DPI”
移動和桌面設備製造商更喜歡用 DPI 而非 PPI 來表示他們的屏幕測量值。 但不要讓您感到困惑：屏幕始終是 PPI，打印機始終是 DPI 。
DPI/PPI 標準
為了表示所有這些點和像素，我們使用點 ( pt ) 單位。
但是 CSS 的點單位源自默認的打印機 DPI，這也是在 1980 年代決定的，等於72 DPI。 這意味著1英寸的 CSS 始終等於72點。
-
1英寸 =72點 1點 =1英寸的1/72
用於 Web 的像素，用於打印機的點
對於網絡，DPI 單位沒有任何意義。 Web DPI 是根據不同的標準（ 96 DPI）定義的，我們在計算 CSS 英寸和 CSS 厘米時已經討論過。 因此，沒有理由在網絡上使用積分單位。
注意： 1點不等於 (CSS) 像素。
-
1點 =1.333像素 72點 =1英寸72點 =96像素
打印機
在這篇文章中，我主要想說明為什麼網絡沒有絕對的單位。 但是將它們用於打印機呢？ 是否有理由為打印機使用 CSS 英寸或厘米或點單位？
我的打印測試
我進行了一個小測試，以檢查 1980 年代的 DPI 標準是否在打印機上正常工作。 我創建了兩個盒子：一個寬度和高度為72磅，第二個盒子的寬度和高度為1英寸。
我在辦公室裡的激光打印機上打印了這兩個盒子。 這是我的 Codepen，用於測試打印機的點和英寸：
請參閱 Elad Shechter 的 Pen [1 英寸](https://codepen.io/smashingmag/pen/ZEKxMMy)。
結果
我在激光打印機上打印了這個演示。 令我驚訝的是，如果我使用72點（或1英寸），我得到的正好是1英寸。 這意味著，對於打印機來說，也許仍然有充分的理由使用點、英寸和厘米等 CSS 單位。
打印機能夠打印更多的 DPI，但如果我們在打印機上以100%縮放工作，那麼 CSS 的72點（或1英寸）將等於實際的物理英寸。
提醒：這篇文章更多的是關於絕對單位與網絡的連接，而不是與打印機的連接。 當然，結果可能會在不同類型的打印機上發生變化。
推薦閱讀：在 CSS 中使用 HSL 顏色
嘗試在 Web 上創建準確的尺寸
如果我們查看 16 英寸 MacBook Pro，它的物理像素與每1 CSS 像素的比率為1.714 ，我們無法準確預測網絡上的尺寸。
如果我們嘗試使用 JavaScript 的window.devicePixelRatio猜測 16 英寸 MacBook Pro 上的真實設備像素比率，它將返回錯誤的比率2 ，而不是1.714 。 （這還沒有考慮 Web 瀏覽器和操作系統的縮放狀態。）
為什麼我們需要真正的絕對 CSS 單元
當我們想為側邊欄元素定義固定大小時，我們會使用 CSS 像素。 但是如果你仔細想想，現在 CSS 像素已經沒有任何意義了。 正如我們在上面看到的，在大多數智能手機和台式機上，CSS 像素不再描述設備像素。
基於此，我認為我們需要 CSS 的實際物理單位（如真正的厘米或英寸單位），因為 CSS 像素在網絡上不再具有任何真正的意義。
值得一提的是，Firefox 已經實現了一個實際的物理毫米單位（ mozmm ），但在 59 版中將其刪除。我不知道他們為什麼將其刪除。 也許是因為很多東西已經依賴於 CSS 像素，例如響應式圖像以及em和rem單位。 如果我們嘗試添加新的物理測量，可能會導致比解決的問題更多的問題。
似乎網絡人已經習慣於以像素為單位思考，即使 CSS 像素單元已失去與設備像素的連接，我們仍將繼續使用該單元。
如果你仍然認為 CSS 像素是一個很好的度量單位，試著向一個新的 Web 開發人員解釋這個單位實際測量的是什麼。
目前，我們還沒有任何真正的方法來描述 CSS 中的物理尺寸。
所以， CSS 像素是最差的絕對單位——除了所有其他的。
總結
在本文開頭，我說過絕對 CSS 單位已經變成了一種新的相對單位。 我們從 CSS 像素開始，我們看到了 CSS 像素和設備像素之間的區別。
然後，我們發現 CSS 英寸和 CSS 厘米是直接從 CSS 像素轉換而來的，與真正的英寸和厘米沒有聯繫。 最後，我們討論了點單元，並再次討論了這個單元對網絡沒有絕對意義。
最後的話
就這樣。 我希望你喜歡這篇文章並從我的經驗中學習。 如果您喜歡這篇文章，我會很高興聽到並分享它。
參考
- “CSS 長度解釋”，Tim Chien，Robert Nyman，Mozilla Hacks
- “每英寸點數”，維基百科
- “點（排版）”，維基百科
- “CSS 值和單位”，W3C