คุณควรใช้หน่วย CSS ใดและเมื่อใด

Question

Accepted Answer

หน่วย CSS แบ่งออกเป็น **สัมบูรณ์** (คงที่) และ **สัมพัทธ์** (ปรับขนาดตามอย่างอื่น) การเลือกอย่างถูกต้องเป็นกุญแจสำคัญสำหรับเลย์เอาต์ที่ตอบสนองและเข้าถึงได้

## สัมบูรณ์

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

ใช้ `px` สำหรับสิ่งที่ไม่ควรปรับขนาด (ขอบเขต รายละเอียดขนาดเล็กที่คงที่)

## สัมพัทธ์ — อันสำคัญ

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem vs em — ความแตกต่างที่สำคัญ

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em` **ประกอบ** ผ่านการเรียงซ้อน (ลูกของลูกจะคูณ) ซึ่งอาจหมุนแบบไม่คาดคิด `rem` อ้างอิงรากเสมอ ดังนั้นจึงสามารถคาดเดาได้ — มาตรฐานสำหรับขนาดตัวอักษรและระยะห่าง ใช้ `em` เมื่อคุณ *ต้องการ* ให้ขนาดสัมพัทธ์กับแบบอักษรในท้องถิ่น (เช่น ช่องว่างด้านในบนปุ่มที่ปรับขนาดตามข้อความของมัน)

## เหตุใดหน่วยสัมพัทธ์จึงสำคัญสำหรับความสามารถในการเข้าถึง

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

การใช้ `rem` สำหรับประเภทจะเคารพผู้ใช้ที่ตั้งแบบอักษรเริ่มต้นที่ใหญ่ขึ้น — ชัยชนะในการเข้าถึงจริงที่ `px` ทำให้สูญเสีย

## เหตุที่มันสำคัญ

หน่วยที่ถูกต้องทำให้เลย์เอาต์ตอบสนองและเข้าถึงได้: `rem` สำหรับประเภท/ระยะห่าง (คาดเดาได้ + เคารพการตั้งค่าผู้ใช้) `%`/`vw`/`vh` สำหรับเลย์เอาต์ของเหลว `px` สำหรับรายละเอียดคงที่ และ `em` สำหรับขนาดสัมพัทธ์ในท้องถิ่น

หน่วยมุมมองของเบราว์เซอร์ที่ใหม่กว่า (`dvh` `svh`) ยังแก้ไขปัญหาความสูงของแถบที่อยู่บนมือถือ