CSS Units
CSS Units คือ หน่วยที่ใช้กำหนดขนาด ขององค์ประกอบต่างๆ เช่น ความกว้าง ความสูง ฟอนต์ หรือระยะห่าง โดยแบ่งเป็น 2 ประเภทหลักคือ Absolute Units และ Relative Units
CSS Units
CSS Units คือ Value ที่ใช้กำหนดขนาด ของ Property ต่างๆ เช่น
CSS Units
| Unit | คำอธิบาย | ตัวอย่างการใช้งาน | ประเภท |
|---|---|---|---|
| Font Units | |||
pt | Point (1 pt = 1/72 นิ้ว) | font-size: 12pt; | Absolute Units |
em | ขึ้นกับขนาดฟอนต์ของ Parent Element (1em = ขนาดฟอนต์ของ Parent) | padding: 2em; | Relative Units |
rem | ขึ้นกับขนาดฟอนต์ของ Root Element (ค่าเริ่มต้น = 16px) | font-size: 1.5rem; | Relative Units |
ch | ความกว้างของตัวอักษร 0 ของฟอนต์ปัจจุบัน | width: 10ch; | Relative Units |
ex | ความสูงของตัวอักษร x ของฟอนต์ปัจจุบัน | line-height: 2ex; | Relative Units |
| Layout Units | |||
px | พิกเซล (Pixel) หน่วยมาตรฐานในหน้าจอ | width: 200px; | Absolute Units |
cm | เซนติเมตร | height: 5cm; | Absolute Units |
mm | มิลลิเมตร | border: 2mm solid; | Absolute Units |
in | นิ้ว (1 นิ้ว = 96 พิกเซล) | width: 1in; | Absolute Units |
pc | Pica (1 pica = 12 pt) | margin: 1pc; | Absolute Units |
% | เปอร์เซ็นต์ เทียบกับขนาดของ Parent Element | width: 50%; | Relative Units |
vw | เปอร์เซ็นต์ของความกว้าง Viewport (1vw = 1% ของความกว้างหน้าจอ) | width: 50vw; | Relative Units |
vh | เปอร์เซ็นต์ของความสูง Viewport (1vh = 1% ของความสูงหน้าจอ) | height: 100vh; | Relative Units |
vmin | เปอร์เซ็นต์ของ Viewport ด้านที่เล็กที่สุด (เล็กกว่า vw หรือ vh) | font-size: 5vmin; | Relative Units |
vmax | เปอร์เซ็นต์ของ Viewport ด้านที่ใหญ่ที่สุด (ใหญ่กว่า vw หรือ vh) | font-size: 5vmax; | Relative Units |
การเลือกใช้
- Absolute Units => ใช้เมื่อคุณต้องการขนาดที่คงที่และไม่ปรับตามขนาดของหน้าจอ เช่น การพิมพ์, รูปภาพที่ต้องการขนาดแน่นอน
- Relative Units => เหมาะกับการออกแบบที่ยืดหยุ่นและรองรับการปรับขนาดตามหน้าจอ เช่น เว็บไซต์ที่ต้องการให้รองรับการแสดงผลบนหลายๆ อุปกรณ์
โดยเริ่มต้นให้ใช้ Relative Units ไว้ก่อน แล้วอะไรที่ต้องการขนาดที่แน่นอนใช้ Absolute Units ทีหลัง