| สัมบูรณ์ |
|---|
| 1/96 นิ้ว (พิกเซลอ้างอิงของ CSS) | ขนาด UI แบบตายตัว: เส้นขอบ เส้นบาง ขนาดไอคอน | border: 1px solid #000; |
| 1/72 นิ้ว (1pt = 1.333px) | สไตล์ชีตงานพิมพ์ ที่ขนาดสอดคล้องกับกระดาษจริง | font-size: 12pt; |
| 1 เซนติเมตร (≈37.8px) | เลย์เอาต์งานพิมพ์ที่ต้องวัดตามขนาดจริง | margin: 2cm; |
| 1 มิลลิเมตร (≈3.78px) | การวัดงานพิมพ์ระดับละเอียด | padding: 5mm; |
| 1 นิ้ว (96px = 2.54cm) | เลย์เอาต์งานพิมพ์ที่ระบุขนาดเป็นนิ้ว | margin: 1in; |
| อิงกับฟอนต์ |
|---|
| ขนาดฟอนต์ของอิลิเมนต์เอง (สืบทอดจากพาเรนต์) | ระยะห่างที่ย่อ-ขยายตามข้อความรอบข้าง | padding: 1em; |
| ขนาดฟอนต์ของอิลิเมนต์ราก (อิลิเมนต์ html) | ขนาดฟอนต์: เคารพการตั้งค่าขนาดฟอนต์รากของผู้ใช้ | font-size: 1.25rem; |
| ความกว้างแนวรั้วของกลิฟ '0' ในฟอนต์ปัจจุบัน | กำหนดความยาวบรรทัดที่อ่านง่าย (จำนวนอักขระต่อบรรทัด) | max-width: 70ch; |
| ความสูง x ของฟอนต์ปัจจุบัน (ความสูงของ 'x' ตัวเล็ก) | ค่าแนวตั้งที่ผูกอยู่กับฟอนต์ | line-height: 2ex; |
| ความสูงตัวพิมพ์ใหญ่ของฟอนต์ปัจจุบัน (ความสูงของอักษรตัวใหญ่) | ค่าแนวตั้งตามความสูงตัวพิมพ์ใหญ่ แน่นกว่า ex | padding-top: 0.5cap; |
| ความกว้างแนวรั้วของอักษรภาพ '水' (น้ำ) ในฟอนต์ปัจจุบัน | การกำหนดขนาดที่ตามเซลล์อักขระ CJK หนึ่งตัว | width: 4ic; |
| ความสูงบรรทัดที่คำนวณแล้วของอิลิเมนต์เอง | กำหนดขนาดอิลิเมนต์เป็นจำนวนบรรทัดข้อความเต็ม | height: 3lh; |
| ความสูงบรรทัดของอิลิเมนต์ราก | ระยะห่างเป็นจำนวนเท่าของความสูงบรรทัดหลักของเอกสาร | margin-block: 2rlh; |
| อิงกับวิวพอร์ต |
|---|
| ค่าของพร็อพเพอร์ตี้เดียวกันในพาเรนต์ | เลย์เอาต์ยืดหยุ่นตามขนาดอิลิเมนต์ที่ครอบอยู่ | width: 50%; |
| 1% ของความกว้างวิวพอร์ต | ส่วนเต็มความกว้างที่ขนาดตามความกว้างหน้าจอ | width: 100vw; |
| 1% ของความสูงวิวพอร์ต | ส่วน hero หรือโอเวอร์เลย์ที่ครอบคลุมความสูงหน้าจอ | height: 100vh; |
| 1% ของมิติที่เล็กกว่าของวิวพอร์ต | กำหนดขนาดอิลิเมนต์ให้พอดีหน้าจอในทุกการวางแนว | font-size: 5vmin; |
| 1% ของมิติที่ใหญ่กว่าของวิวพอร์ต | เติมเต็มแกนหลักของวิวพอร์ต | font-size: 5vmax; |
| 1% ของความสูงวิวพอร์ตแบบเล็ก (UI ของเบราว์เซอร์แสดงเต็มที่) | ส่วนเต็มความสูงบนมือถือที่พอดีเหนือแถบเบราว์เซอร์ที่ขยายเต็ม | height: 100svh; |
| 1% ของความสูงวิวพอร์ตแบบใหญ่ (UI ของเบราว์เซอร์ถูกซ่อน) | พื้นหลังที่ต้องปกคลุมหน้าจอแม้แถบเบราว์เซอร์จะยุบลง | height: 100lvh; |
| 1% ของความสูงวิวพอร์ตแบบไดนามิก ตามการแสดง-ซ่อน UI ของเบราว์เซอร์ | วิธีแก้ 100vh บนมือถือ: ความสูงปรับตามการปรากฏของแถบเบราว์เซอร์ | height: 100dvh; |
| 1% ของความกว้างวิวพอร์ตแบบเล็ก | คู่ที่สอดคล้องแนวความกว้างของ svh สำหรับสถานะวิวพอร์ตแคบที่สุด | width: 100svw; |
| 1% ของความกว้างวิวพอร์ตแบบใหญ่ | คู่ที่สอดคล้องแนวความกว้างของ lvh สำหรับสถานะวิวพอร์ตกว้างที่สุด | width: 100lvw; |
| 1% ของความกว้างวิวพอร์ตแบบไดนามิก ตาม UI ของเบราว์เซอร์ | คู่ที่สอดคล้องแนวความกว้างของ dvh เมื่อวิวพอร์ตย่อ-ขยายตามแถบเบราว์เซอร์ | width: 100dvw; |
| 1% ของขนาดวิวพอร์ตตามแกนอินไลน์ (ความกว้างในโหมดเขียนแนวนอน) | การกำหนดขนาดตามวิวพอร์ตที่เป็นไปตามทิศทางการเขียน | width: 50vi; |
| 1% ของขนาดวิวพอร์ตตามแกนบล็อก (ความสูงในโหมดเขียนแนวนอน) | การกำหนดขนาดตามวิวพอร์ตที่ยังถูกต้องในโหมดเขียนแนวตั้ง | height: 50vb; |
| ยืดหยุ่น |
|---|
| ค่าที่ต้องการโดยถูกจำกัดด้วยขอบล่างและขอบบน | ตัวอักษรแบบยืดหยุ่นที่ไม่ทะลุขอบล่างหรือขอบบน | width: clamp(320px, 80vw, 1100px); |
| ค่าที่น้อยที่สุดในบรรดาอาร์กิวเมนต์ที่คั่นด้วยจุลภาค | ครอบขนาดไว้เพื่อไม่ให้เกินค่าสูงสุด | width: min(100%, 600px); |
| ค่าที่มากที่สุดในบรรดาอาร์กิวเมนต์ที่คั่นด้วยจุลภาค | บังคับขนาดขั้นต่ำที่โตขึ้นตามวิวพอร์ต | width: max(50%, 300px); |
| มุม |
|---|
| 1/360 ของวงกลมเต็ม | ทรานส์ฟอร์มหมุน และตำแหน่งมุมของกราเดียนต์ | transform: rotate(45deg); |
| เรเดียน; 1rad ≈ 57.2958deg | มุมที่คำนวณจากคณิตศาสตร์ เช่น ทรานส์ฟอร์มที่สร้างขึ้นอัตโนมัติ | transform: rotate(1.5708rad); |
| เกรเดียน; 400grad = วงกลมเต็ม | ค่ามุมแบบเก่าหรือแบบงานสำรวจ | transform: rotate(100grad); |
| 1turn = วงกลมเต็ม 360° | การหมุนเต็มวงหรือครึ่งวงที่อ่านเข้าใจได้ทันที | transform: rotate(0.5turn); |
| เวลา |
|---|
| หนึ่งวินาที | ระยะเวลาของแอนิเมชันและทรานสิชัน | transition: opacity 0.3s; |
| หนึ่งมิลลิวินาที (1s = 1000ms) | แอนิเมชันตอบสนอง UI สั้น ๆ และความหน่วง | animation-duration: 150ms; |
| ความละเอียด |
|---|
| จำนวนจุดต่อนิ้วของเอาต์พุต | มีเดียควารีความละเอียดสำหรับงานพิมพ์ | @media (min-resolution: 300dpi) |
| จุดต่อหน่วย px; 1dppx เท่ากับจอมาตรฐาน 96dpi | มีเดียควารีสำหรับ Retina และจอ DPI สูง | @media (min-resolution: 2x) |
| จุดต่อเซนติเมตร (1dppx ≈ 2.54dpcm) | มีเดียควารีความละเอียดในหน่วยเมตริก | @media (min-resolution: 118dpcm) |