Relative Units

เมื่อคุณตั้งค่า Frame ให้ กว้าง 1440 px ใน Figma ตัวเลขนั้นตายตัว ไม่เปลี่ยนแปลง ถ้าทำแบบเดิมใน CSS คุณจะได้ Layout ที่สวยงามบนจอ 1440 px แต่พังบนอุปกรณ์อื่น ทางออกคือ Relative Units — ค่าที่คำนวณจากบริบทโดยรอบเสมอ จึงปรับตัวได้โดยธรรมชาติ

สี่หน่วยที่ต้องรู้จัก

`%` — เปอร์เซ็นต์ของ Parent

width: 50% หมายถึง “ครึ่งหนึ่งของความกว้าง Parent” ถ้า Parent กว้าง 800 px Element นี้จะกว้าง 400 px เมื่อ Parent ย่อเหลือ 400 px Element นี้จะเหลือ 200 px ปรับตัวเสมอ

`rem` — สัมพัทธ์กับ Root Font Size

rem ย่อมาจาก “root em” โดย Default Browser กำหนด Root Font Size ที่ 16 px ดังนั้น 1rem = 16px จุดแข็งคือถ้าผู้ใช้เปลี่ยนขนาด Text ใน Browser (เพื่อการเข้าถึง) ค่า rem จะปรับตาม แต่ค่า px ตายตัวจะไม่เปลี่ยน

1.5rem = 24 px (ที่ Root 16 px)
0.875rem = 14 px

ใช้ rem สำหรับ Font Size, Spacing, Padding และ Margin

`em` — สัมพัทธ์กับ Font Size ของ Element ปัจจุบัน

em คูณกับ font-size ของ Element นั้นเอง ทำให้มีประโยชน์สำหรับ Padding ที่ควรปรับตามขนาด Text เช่น Button ที่รู้สึกสัดส่วนเดิมไม่ว่า Text จะใหญ่แค่ไหน แต่เมื่อ Nest กันลึกๆ อาจเกิดผลสะสมที่ไม่คาดคิด นักออกแบบส่วนใหญ่จึงนิยม rem สำหรับ Spacing ทั่วไปมากกว่า

`vw` / `vh` — เปอร์เซ็นต์ของ Viewport

1vw = 1% ของความกว้าง Viewport (หน้าต่าง Browser) และ 1vh = 1% ของความสูง Viewport ค่าเหล่านี้สัมพัทธ์กับหน้าต่าง Browser โดยตรง ไม่ใช่ Parent ใดๆ ต้องการ Hero Section ที่เต็มจอเสมอ? height: 100vh ต้องการหัวข้อที่ใหญ่ขึ้นตามหน้าจอ? font-size: 5vw

Fixed vs Relative — เปรียบเทียบแบบ Side by Side

Preview ด้านล่างแสดงกล่องสองใบ ใบแรกใช้ px ตายตัว ใบที่สองใช้ % และ rem ย่อ Preview Pane (ทำหน้าต่าง Browser ให้แควลง หรือดูบนโทรศัพท์) เพื่อดูความแตกต่าง

<div class="demo">
  <div class="box box--fixed">
    Fixed: 280px wide,\n16px font
  </div>
  <div class="box box--fluid">
    Fluid: 80% wide,\n1rem font
  </div>
</div>

สังเกตว่ากล่องสีแดงยังคงกว้าง 280 px เสมอ บนหน้าจอแควจะล้นออกหรือถูกตัด แต่กล่องสีเขียวย่อตัวอย่างสวยงามเพราะ 80% สัมพัทธ์กับพื้นที่ที่มีอยู่เสมอ

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใช้ px ทุกที่ ทำให้ user ที่ปรับขนาด font ใน browser ไม่ได้ผล
สลับสับสนระหว่าง rem (เทียบกับ root) กับ em (เทียบกับ parent) ทำให้ nested element ขนาดเพี้ยน

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ตัวเลข px ที่แน่นอนจาก Figma” แต่ developer ต้องแปลงเป็น rem/% เพื่อให้ layout ยืดหยุ่นตาม user preference และหน้าจอที่ต่างกัน

💡 ตัวอย่างจากของจริง

เว็บ accessibility-first อย่าง gov.uk ใช้ rem ทั้งเว็บ เพื่อให้ user ที่ตั้งค่า browser font ใหญ่ขึ้น (สำหรับผู้มีปัญหาด้านสายตา) เห็นทุกอย่างขยายตามสัดส่วนถูกต้อง