CSS尺寸單元的概述

>本文探討了CSS尺寸單元的四個主要類別：絕對，相關，相關和容器相關。我們將研究它們的目的，最佳用例以及選擇跨各種設備和屏幕尺寸的響應式和適應性的Web佈局的選擇策略。

密鑰概念：

1. CSS尺寸單元概述：我們將介紹不同的CSS大小單元，將它們分類為上述四個類別。 了解CSS中使用的>計算>>>的>>>在CSS中使用的>之間的差異對於有效應用至關重要。

>詳細的單元類型：我們將深入到每個單元類別的細節中。絕對單位在整個媒體上保持一致；字體搭配單元尺寸為字體尺寸；與視口相關的單元調整到瀏覽器窗口；與容器相關的單元取決於其父元素的尺寸。 實際示例和用例將說明其申請。
2. >

   >

   實用的應用和最佳實踐：本文以針對不同設計場景選擇適當單元的指導結束。 我們建議將絕對單元用於固定尺寸，可擴展版式的字體相關單元，用於響應式設計的視口相關單元以及各種佈局內靈活組件的容器相關單元。目的是提高各種設備的網站可讀性，可用性和可訪問性。

3. 了解CSS尺寸單元

> CSS提供了指定元素大小或長度的各種方法。 這些單元分為四類：

絕對單位：

，

，

等。這些單元是固定的，並且獨立於其他元素或視口。

> font疊加單元：，cm，px，in等。這些單元相對於元素的字體大小或其root元素的字體大小。

>視口相關的單位：em，rem，ch，ex等。這些單元相對於瀏覽器ViewPort的尺寸而言。

>

相關單位：vwvh，vmin，vmax，

等。這些單元相對於元素包含的塊的尺寸（容器查詢上下文）。

在繼續之前，讓我們回顧一下關鍵術語：cqw

• 指定的值：> stylesheet中定義的值。
• 計算值：應用瀏覽器級聯和繼承規則後的值。 > >
使用的值：
• >瀏覽器調整和轉換後的最終值（相對單位至絕對的物理單位到像素）。
絕對單位

絕對單位與特定的媒體依賴性測量相關。 對於打印，它們對應於物理單位。對於屏幕，它們與像素有關（大約1/96英寸）。 示例包括，，

，

，in和cm。 表1總結了這些單元及其等效物。 雖然對已知的物理尺寸有用，但由於對具有調整後的瀏覽器字體尺寸的用戶缺乏可擴展性，避免將其用於字體尺寸。 mmQ>字體相關單位ptpc

>字體相關單元使用字體指標來確定元素尺寸。 這些可以相對於元素的

（局部）或根元素的（root-relative）。 和

是常見的例子。

是相對於父font-size的，而font-size相對於root元素的em>。 其他單元，例如rem>，em，font-size，及其根旋轉的對應物（rem>，font-size，ch）基於glyph dimensions（字符的可視化表示）。 這些字體之間可能會有很大的變化，從而影響最終渲染尺寸。 線高單元（ex和ic）也包含在此類別中。 rch> rex ric與視口相關的單位lh rlh

與視口相關的單元取決於瀏覽器窗口的尺寸。 它們是相對於初始包含塊的計算方法（針對分類媒體的視口或頁面）。

和分別代表視口寬度和高度的1％。 和

分別是的較小和較大的。 動態視口單元（vw，vh等）隨著瀏覽器接口元素的變化而進行調整。 這些單元對於創建全屏元素和流體版式很有價值。 > vmin vmax容器相關單元vwvh相對於元素包含的塊，與容器查詢相對於元素的包含塊計算

>容器相關單元（或容器查詢長度單元）。 cqw>和cqh表示容器寬度和高度的1％。 cqi和cqb分別相對於內聯和塊大小，並且受writing-mode屬性的影響。 cqmin和cqmax是和。 這些單元能夠創建適應不同上下文的組件。 > cqicqb結論

掌握CSS尺寸單元是創建響應式和適應性的Web佈局的關鍵。 單位的選擇顯著影響網站的可讀性，可用性和可訪問性。 根據設計需求，目標設備和可訪問性要求選擇單元。 不同單元的組合通常是最有效的方法。 以下部分包括一個常見問題部分，以進行進一步澄清。

>

（常見問題部分將在此處遵循，反映了原始常見問題解答部分的結構和內容。

以上是CSS尺寸單元的概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！