CSS Units เป็นเครื่องมือสำคัญที่ใช้ในการกำหนดขนาดขององค์ประกอบต่าง ๆ บนหน้าเว็บ ไม่ว่าจะเป็นฟอนต์ ขนาดของกล่อง หรือความกว้าง และความสูงของรูปภาพ หน่วยวัดที่เลือกใช้สามารถส่งผลต่อการแสดงผลของหน้าเว็บโดยตรง การเลือกใช้หน่วยวัดที่เหมาะสมจะช่วยให้การออกแบบเว็บมีความสวยงาม และตอบสนองต่อทุกอุปกรณ์ได้อย่างลงตัว
ประเภทของ CSS Units
CSS Units สามารถแบ่งออกเป็นสองประเภทหลักๆ คือ Absolute Units (หน่วยคงที่) และ Relative Units (หน่วยสัมพันธ์) โดยแต่ละประเภทมีลักษณะและการใช้งานที่แตกต่างกันไป
Absolute Units (หน่วยคงที่)
หน่วยคงที่ หรือ Absolute Units เป็นหน่วยวัดที่มีขนาดตายตัว ไม่เปลี่ยนแปลงตามขนาดของหน้าจอหรือขนาดฟอนต์พื้นฐาน หน่วยคงที่เหมาะสำหรับการกำหนดขนาดที่ต้องการความแม่นยำสูง เช่น:
px (pixel)
หน่วยที่ใช้บ่อยที่สุดใน CSS เป็นหน่วยที่อิงกับจุดภาพบนหน้าจอ (Screen pixel) การใช้ px จะให้ผลลัพธ์ที่ชัดเจนและควบคุมได้ง่าย ข้อดี คือ สามารถกำหนดขนาดที่แน่นอน แต่ข้อเสีย คือ ไม่สามารถปรับตัวตามขนาดหน้าจอที่ต่างกันได้ ทำให้บางครั้งไม่เหมาะกับการออกแบบที่ต้องการความยืดหยุ่น
cm, mm, in
หน่วยวัดเหล่านี้อิงกับขนาดที่แท้จริงในโลกความเป็นจริง เช่น เซนติเมตร (cm), มิลลิเมตร (mm), และนิ้ว (in) แม้จะไม่ค่อยถูกใช้งานบนเว็บ แต่เหมาะสำหรับงานพิมพ์ที่ต้องการความแม่นยำในการวัดขนาด
Relative Units (หน่วยสัมพันธ์)
หน่วยสัมพันธ์ หรือ Relative Units เป็นหน่วยวัดที่สามารถปรับเปลี่ยนได้ตามบริบท เช่น ขนาดของฟอนต์ หรือหน้าจอ Relative Units ทำให้การออกแบบเว็บมีความยืดหยุ่น และเหมาะสมกับทุกขนาดหน้าจอ เช่น:
% (percent)
หน่วยที่สัมพันธ์กับขนาดขององค์ประกอบพาเรนต์ (parent element) ใช้บ่อยในการตั้งค่าความกว้างหรือความสูงเพื่อให้ปรับตามขนาดของพาเรนต์ (parent element)
<div class='container'>
<div class='card'>
Hello
</div>
</div>Code language: HTML, XML (xml).container {
width: 300px;
border: 2px solid black;
padding: 20px;
}
.card {
width: 60%;
border: 2px solid red;
padding: 10px;
}Code language: CSS (css)จากตัวอย่างจะเห็นได้ว่า .card มีขนาด 60% หรือ 180px (60% ของ 300) เมื่ออยู่ใน .container ที่มีขนาด 300px ซึ่งหาก .container มีการเปลี่ยนค่าขาดของ .card ก็จะเปลี่ยนตามไปด้วย
em
หน่วยวัดที่สัมพันธ์กับขนาดฟอนต์ของพาเรนต์ (parent element) โดย 1em จะเท่ากับ 100% หรือคิดเป็น 1 เท่า ของค่าเริ่มต้นนั่นเอง การใช้ em เหมาะกับการตั้งค่าที่ต้องการให้ขนาดปรับตามขนาดฟอนต์พื้นฐาน แต่ข้อเสีย คือ เมื่ออยู่ในโครงสร้างที่มีการซ้อนทับขององค์ประกอบหลายชั้นค่าของ em อาจเปลี่ยนไป และคาดเดาได้ยาก
body { font-size: 62.5%; }
h1 { font-size: 2.4em; }
p { font-size: 1.4em; }Code language: CSS (css)จากตัวอย่างเรามีการกำหนดค่า font-size ใน body ให้มีขนาด 62.5% หรือ 10px (มาจาก 0.625 * 16) ซึ่งหากเราไม่กำหนดจะเท่ากับ 16px ซึ่งก็คือค่าเริ่มต้นของ browser นั้นเอง
h1 ที่มี font-size เป็น 2.4 em ก็จะเท่ากับ 10 * 2.4 = 24px
p ที่มี font-size เป็น 1.4 em ก็จะเท่ากับ 10 * 1.4 = 14px
body { font-size: 62.5%; }
.container { font-size:1.6em; }
.container h1 { font-size:2.4em; }
.container p { font-size:1.6em; }Code language: CSS (css)จากตัวอย่างเรามีการกำหนดค่า font-size ใน body ให้มีขนาด 62.5% เหมือนเดิม แต่เรามีการกำหนดค่า font-size เพิ่มเติมใน .container ให้มีขนาด 1.6em เท่ากับ 10 * 1.6 = 16px
h1 ที่เราตั้งใจจะให้มีขนาด 24px เหมือนเดิมจะถูกแทนค่าเป็น 38.4px หรือก็คือ 16 * 2.4 = 38.4
p ที่เราตั้งใจจะให้มีขนาด 16px เหมือนเดิมจะถูกแทนค่าเป็น 25.6px หรือก็คือ 16 * 1.6 = 25.6
rem (root em)
คล้ายกับ em แต่สัมพันธ์กับขนาดฟอนต์ของ root element (html) ทำให้การคำนวณขนาดง่ายขึ้นในกรณีที่มีการซ้อนกันขององค์ประกอบหลายชั้น rem ถูกใช้บ่อยในการตั้งค่าขนาดฟอนต์เพื่อให้สามารถปรับตามขนาดของหน้าจอได้
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
h1 { font-size: 2.4rem; }Code language: CSS (css)จากตัวอย่างเรามีการกำหนดค่า font-size ใน html ให้มีขนาด 62.5% หรือ 10px (มาจาก 0.625 * 16) ซึ่งหากเราไม่กำหนดจะเท่ากับ 16px ซึ่งก็คือค่าเริ่มต้นของ browser นั้นเอง
body ที่มี font-size เป็น 1.4rem ก็จะเท่ากับ 10 * 1.4 = 14px
h1 ที่มี font-size เป็น 2.4rem ก็จะเท่ากับ 10 * 2.4 = 24px
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
.container { font-size: 1.4rem; }
.container h1 { font-size: 2.4rem; }Code language: CSS (css)จากตัวอย่างเรามีการกำหนดค่า font-size ใน html ให้มีขนาด 62.5% และ body ขนาด 1.4rem เหมือนเดิม แต่เรามีการกำหนดค่า font-size เพิ่มเติมใน .container ให้มีขนาด 1.4rem เท่ากับ 10 * 1.4 = 14px
h1 ที่มี font-size เป็น 2.4rem ก็จะยังคงเท่ากับ 10 * 2.4 = 24px เพราะมันได้ทำการอ้างอิง Root Element หรือ html อยู่เสมอ
vw, vh
หน่วยที่สัมพันธ์กับขนาดของ viewport (หน้าจอ) โดย 1vw เท่ากับ 1% ของความกว้างของหน้าจอ และ 1vh เท่ากับ 1% ของความสูงของหน้าจอ ใช้ในการออกแบบเว็บที่ต้องการให้ขนาดองค์ประกอบปรับตามขนาดหน้าจอโดยตรง
h1 { font-size: 24vw; }Code language: CSS (css)vmin, vmax
หน่วยที่สัมพันธ์กับขนาดของ viewport (หน้าจอ) ที่เล็กที่สุดหรือใหญ่ที่สุด หน่วยเหล่านี้ช่วยให้การออกแบบมีความยืดหยุ่นมากขึ้นเมื่อต้องปรับตามสัดส่วนของหน้าจอ
การเลือกใช้ CSS Units ในสถานการณ์ต่าง ๆ
การเลือกหน่วยวัดที่เหมาะสมขึ้นอยู่กับลักษณะ และเป้าหมายของการออกแบบเว็บ
การออกแบบ Responsive
ในการออกแบบเว็บที่ต้องการให้ตอบสนองต่อทุกขนาดหน้าจอ ควรเลือกใช้หน่วยสัมพันธ์อย่าง rem, vw, และ vh ซึ่งสามารถปรับขนาดตามหน้าจอได้ โดย rem เหมาะกับการตั้งค่าขนาดฟอนต์ ในขณะที่ vw และ vh เหมาะสำหรับการตั้งค่าความกว้างและความสูงขององค์ประกอบบนหน้าเว็บ
การตั้งค่าขนาดฟอนต์ที่ยืดหยุ่น
สำหรับการจัดการขนาดของฟอนต์ การใช้ rem จะช่วยให้ขนาดฟอนต์สามารถปรับตามขนาดของหน้าจอได้อย่างเหมาะสม การตั้งค่าฟอนต์ด้วย rem ทำให้การเปลี่ยนแปลงขนาดฟอนต์บนอุปกรณ์ต่าง ๆ ทำได้ง่ายขึ้น โดยไม่ต้องแก้ไขโค้ดมาก
การจัดวาง Layout และ Grid
การใช้หน่วยสัมพันธ์ เช่น %, vw, vh ในการตั้งค่าขนาดของ layout หรือ grid จะช่วยให้การจัดวางองค์ประกอบต่างๆ มีความยืดหยุ่นมากขึ้น โดยสามารถปรับตัวตามขนาดของหน้าจอได้ ซึ่งเหมาะสำหรับการออกแบบเว็บที่ต้องการรองรับหลายขนาดหน้าจอ
สรุป
การเลือกใช้หน่วยวัดใน CSS ไม่เพียงแต่ส่งผลต่อการแสดงโครงสร้างบนหน้าเว็บที่สวยงามเท่านั้น แต่ยังมีผลต่อประสบการณ์การใช้งานของผู้ใช้อีกด้วย การทำความเข้าใจข้อดีข้อเสียของหน่วยวัดแต่ละประเภทจะช่วยให้เราสามารถเลือกใช้งานได้อย่างเหมาะสม และออกแบบเว็บไซต์ได้อย่างมีประสิทธิภาพ การรู้จักผสมผสานการใช้งานหน่วยวัดเหล่านี้จะทำให้เราสามารถสร้างสรรค์หน้าเว็บที่สวยงาม และใช้งานได้ดีในทุกอุปกรณ์
แหล่งอ้างอิง:
