ทำความเข้าใจหน่วยใน CSS และการเลือกใช้ให้เหมาะสม

ในการพัฒนาเว็บไซต์ การกำหนดขนาดและตำแหน่งขององค์ประกอบต่างๆ บนหน้าจอเป็นสิ่งสำคัญอย่างยิ่ง และ CSS ก็มี "หน่วยวัด" หลากหลายรูปแบบใหเลือกใช้ การเข้าใจความแตกต่างและข้อดีข้อเสียของแต่ละหน่วยจะช่วยให้สร้างเว็บไซต์ที่ทั้งสวยงาม ยืดหยุ่น และตอบสนองต่อทุกขนาดหน้าจอได้อย่างมีประสิทธิภาพ (Responsive Design) บทความนี้จะพามาทำความเข้าใจหน่วยที่ใช้บ่อยใน CSS พร้อมแนะนำแนวทางการเลือกใช้ให้เหมาะสมกับสถานการณ์ต่างๆ

หน่วยใน CSS: สัมบูรณ์ vs. สัมพัทธ์

หน่วยใน CSS สามารถแบ่งออกได้เป็น 2 ประเภทหลักๆ คือ หน่วยสัมบูรณ์ (Absolute Units) และ หน่วยสัมพัทธ์ (Relative Units)

หน่วยสัมบูรณ์ (Absolute Units)

หน่วยเหล่านี้มีขนาดที่ตายตัว ไม่เปลี่ยนแปลงไปตามปัจจัยอื่นใดบนหน้าจอ ทำให้เหมาะสำหรับงานที่ต้องการความแม่นยำสูง แต่ในทางกลับกันก็ไม่เหมาะนักกับการทำ Responsive Design

px (Pixels): เป็นหน่วยที่พื้นฐานที่สุด 1px เท่ากับ 1 พิกเซลบนหน้าจอ (โดยประมาณ) การใช้ px ทำใหควบคุมขนาดได้อย่างแม่นยำ แต่มันจะคงที่เสมอไม่ว่าหน้าจอของผู้ใช้จะเล็กหรือใหญ่แค่ไหนก็ตาม หากใช้มากเกินไป อาจทำให้เนื้อหาแสดงผลผิดเพี้ยนบนอุปกรณ์ที่มีขนาดต่างกัน

หน่วยสัมพัทธ์ (Relative Units)

หน่วยเหล่านี้มีความยืดหยุ่นสูง โดยขนาดจะเปลี่ยนแปลงไปตามปัจจัยอ้างอิงต่างๆ ไม่ว่าจะเป็นขนาดฟอนต์ของ Element แม่ หรือขนาดของ Viewport ทำให้เป็นหัวใจสำคัญของการทำ Responsive Design

หน่วยที่อ้างอิงกับขนาด Font (Font-Relative Units)

em (Em): หน่วยนี้จะอ้างอิงจาก font-size ของ Element แม่ (parent element) เสมอ ตัวอย่างเช่น หาก Element แม่มี font-size: 16px; การกำหนด font-size: 1.5em; ให้ Element ลูก ก็จะทำให้ Element ลูกมีขนาด 1.5 x 16px = 24px หน่วย em เหมาะสำหรับปรับขนาดข้อความให้สัมพันธ์กับบริบทโดยรอบ แต่หากมีการซ้อน Element หลายชั้น การคำนวณขนาดอาจซับซ้อนขึ้นได้
rem (Root Em): เพื่อแก้ปัญหาความซับซ้อนของ em, หน่วย rem จึงถือกำเนิดขึ้น โดยจะอ้างอิงจาก font-size ของ Root Element (คือ <html> Element) เสมอ ไม่ว่าจะซ้อนกันกี่ชั้นก็ตาม ทำให้การควบคุมขนาดทั่วทั้งเว็บไซต์เป็นเรื่องง่าย เพียงแค่ปรับ font-size ที่ <html> เพียงจุดเดียว ก็จะส่งผลต่อทุก Element ที่ใช้ rem ทำให้เว็บไซต์ปรับขนาดได้อย่างสอดคล้องกัน

หน่วยที่อ้างอิงกับขนาด Viewport (Viewport Units)

Viewport คือพื้นที่แสดงผลเนื้อหาของเว็บไซต์บนหน้าจอของผู้ใช้ (ไม่รวมแถบเครื่องมือเบราว์เซอร์)

vh (Viewport Height): 1vh เท่ากับ 1% ของความสูงของ Viewport
vw (Viewport Width): 1vw เท่ากับ 1% ของความกว้างของ Viewport
vmin (Viewport Minimum): 1vmin เท่ากับ 1% ของขนาดที่ น้อยกว่า ระหว่างความกว้างและความสูงของ Viewport
vmax (Viewport Maximum): 1vmax เท่ากับ 1% ของขนาดที่ มากกว่า ระหว่างความกว้างและความสูงของ Viewport

หน่วยเหล่านี้เหมาะอย่างยิ่งสำหรับการสร้างองค์ประกอบที่ต้องการให้มีขนาดสัมพันธ์กับหน้าจอของผู้ใช้ เช่น การสร้าง Hero Section ที่กินพื้นที่เต็มความสูงหน้าจอ (100vh) หรือข้อความที่ปรับขนาดตามความกว้างของหน้าจอ

หน่วยอื่นๆ ที่น่าสนใจ

% (Percentage): เป็นหน่วยที่อ้างอิงกับขนาดของ Element แม่ (parent element) เช่น หาก Element แม่มี width: 500px; และ Element ลูกมี width: 50%; ลูกก็จะมี width เท่ากับ 250px หน่วย % มีประโยชน์อย่างมากในการสร้าง Layout ที่ยืดหยุ่นและปรับขนาดตาม Element แม่
fr (Fractional Unit - ใช้ใน CSS Grid Layout): หน่วยนี้เป็นหัวใจสำคัญของ CSS Grid Layout โดย 1fr หมายถึง 1 ส่วนของพื้นที่ว่างที่สามารถแบ่งได้ ทำให้การจัด Layout แบบตารางมีความยืดหยุ่นและควบคุมการแบ่งพื้นที่ได้อย่างง่ายดาย

เลือกใช้หน่วยอย่างไรให้เหมาะสม?

การเลือกใช้หน่วยที่ถูกต้องจะช่วยให้เว็บไซต์แสดงผลได้ดีบนทุกอุปกรณ์:

สำหรับ Font Size:
- แนะนำให้ใช้ rem เป็นหลัก เพื่อให้ง่ายต่อการควบคุมขนาดฟอนต์ทั่วทั้งเว็บไซต์ และเพื่อรองรับการปรับขนาดฟอนต์ของผู้ใช้ในเบราว์เซอร์ได้ดียิ่งขึ้น
- ใช้ em เมื่อต้องการให้ขนาดฟอนต์ของข้อความนั้นๆ สัมพันธ์กับขนาดฟอนต์ของ Element แม่โดยตรง (เช่น รายการใน List)
- หลีกเลี่ยงการใช้ px สำหรับ Font Size เพื่อให้เว็บไซต์มีความยืดหยุ่นและเป็นมิตรต่อผู้ใช้งานมากขึ้น
สำหรับ Layout (ความกว้าง, ความสูง, Margin, Padding):
- % และ vw/vh: เหมาะสำหรับการสร้าง Layout ที่ปรับขนาดตามหน้าจอ เช่น คอลัมน์ที่ปรับความกว้างตามหน้าจอ, Hero Section ที่กินพื้นที่เต็มความสูง
- rem: สามารถนำมาใช้กำหนด margin และ padding เพื่อให้ขนาดเหล่านี้สอดคล้องกับขนาดฟอนต์หลักของเว็บไซต์
- px: ใช้เมื่อต้องการความแม่นยำสูงสุดและไม่ต้องการให้ขนาดเปลี่ยนแปลง เช่น เส้นขอบที่บางมาก หรือไอคอนที่มีขนาดคงที่
- fr: ใช้เมื่อออกแบบ Layout ด้วย CSS Grid เพื่อแบ่งพื้นที่อย่างเป็นสัดส่วน

โดยสรุปแล้ว การทำ Responsive Design ที่ดีจะเน้นการใช้ หน่วยสัมพัทธ์ (Relative Units) เป็นหลัก เพื่อให้เว็บไซต์สามารถปรับตัวได้อย่างลื่นไหลบนอุปกรณ์หลากหลายขนาด ในขณะที่ หน่วยสัมบูรณ์ (Absolute Units) จะถูกสงวนไว้สำหรับกรณีที่ต้องการความแม่นยำคงที่และไม่ต้องการให้ขนาดเปลี่ยนแปลง

การฝึกฝนและทดลองใช้หน่วยต่างๆ จะช่วยให้เข้าใจถึงศักยภาพของมันได้อย่างลึกซึ้ง และสามารถสร้างเว็บไซต์ที่ตอบโจทย์ความต้องการได้อย่างมีประสิทธิภาพที่สุด

เว็บไซต์อ้างอิง: