สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
ในโลกของการพัฒนาเว็บไซต์ การสร้างเว็บไซต์ที่ยืดหยุ่นและมีประสิทธิภาพเป็นสิ่งที่นักพัฒนาต้องคำนึงถึงเป็นอย่างมาก ด้วยจำนวนอุปกรณ์ที่หลากหลายซึ่งมีขนาดหน้าจอแตกต่างกัน การใช้หน่วยที่ตอบสนองต่อขนาดของหน้าจอและสามารถปรับขนาดได้จึงเป็นเรื่องที่สำคัญ ซึ่งใน CSS มีหน่วยที่สามารถทำให้การออกแบบเว็บไซต์มีความยืดหยุ่นได้ง่ายขึ้น นั่นคือหน่วย Rem และ Em
Rem และ Em เป็นหน่วยวัดขนาดใน CSS ที่ใช้กำหนดความยืดหยุ่นให้กับการออกแบบเว็บไซต์ ในขณะที่หน่วยพิกเซล (px) เป็นการระบุขนาดที่แน่นอน Rem และ Em ช่วยให้ขนาดของการออกแบบสามารถปรับตามการตั้งค่าของผู้ใช้หรือโครงสร้างของ HTML
Em
Em หน่วยนี้มาจาก "M" ของคำว่า "em dash" ซึ่งเป็นมาตรฐานของการวัดขนาดตัวอักษรในน้ำหนักปกติ โดย 1em ถูกตั้งค่าให้มีเท่ากับความสูงของฟอนต์ของโหนดหลัก (หรือโหนดปัจจุบัน)
ตัวอย่างเช่น หากฟอนต์ของตัวอักษรเป็น 16px และเราต้องการกำหนดขนาดของฟอนต์ใหม่เป็น 2em ขนาดจะกลายเป็น 32px เนื่องจาก 2 x 16px = 32px ทั้งนี้ หน่วย Em จะขึ้นอยู่กับขนาดของฟอนต์ของพาร์เร้น (องค์ประกอบห่อหุ้มหรือตัวพ่อ) ทำให้การคำนวณขนาดทั้งหมดซ้อนซับได้
Rem
Rem ย่อมาจาก "Root em" ซึ่งแตกต่างจาก Em คือ มันขึ้นอยู่กับขนาดฟอนต์ของราก (root) ของเอกสสาร HTML หรือ `<html>`, และมักถูกตั้งค่าไว้ที่ 16px
ยกตัวอย่างเช่น ถ้าขนาดฟอนต์ของราก (root) ที่ <html> ถูกตั้งค่าเป็น 16px, การกำหนดฟอนต์ขนาด 2rem จะมีค่าเท่ากับ 32px ซึ่งทำให้การคำนวณขนาดง่ายกว่า Em ด้วยการอ้างอิงตัวเดียวจาก root
การเลือกใช้ Rem และ Em ขึ้นอยู่กับความต้องการของการออกแบบ ถ้าต้องการให้ขนาดขององค์ประกอบยึดตามขนาดฟอนต์ของ element หลักที่ซ้อนลึกลงไปใน DOM เราจะใช้ Em แต่ถ้าต้องการความยืดหยุ่นที่อ้างอิงจาก root อันเปรียบเสมือนมาตรฐาน เราจะใช้ Rem
กรณีการใช้งาน:
ลองพิจารณาการออกแบบหน้าเว็บที่มีหัวเรื่อง, ย่อหน้า, และปุ่ม:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px; /* ที่เป็นค่าเริ่มต้น */
}
h1 {
font-size: 2rem; /* ขึ้นอยู่กับขนาดของ root */
}
p {
font-size: 1em; /* ขึ้นอยู่กับขนาดฟอนต์ของตัวเองหรือพาร์เร้นท์ */
}
button {
font-size: 1.5em; /* ขึ้นอยู่กับขนาดฟอนต์ของพาร์เร้นท์ตัวเอง เช่น p */
}
</style>
</head>
<body>
<h1>Welcome to my Web Page</h1>
<p>This is a paragraph of text.</p>
<button>Click Me</button>
</body>
</html>
ในตัวอย่างนี้ ขนาดของหัวเรื่องจะอยู่ที่ 32px ขึ้นกับ root em ส่วนขนาดตัวอักษรของปุ่มจะถูกคำนวณจากพาร์เร้นท์ซึ่งคือย่อหน้า, หากพาร์เร้นท์ถูกตั้งค่าเป็น 16px ปุ่มจะมีขนาดฟอนต์ 24px
ข้อดี:
1. ความยืดหยุ่น: Rem และ Em ช่วยให้การออกแบบสามารถตอบสนองต่อการเปลี่ยนแปลงขนาดของอุปกรณ์ได้ดี 2. การเข้าถึง: ผู้ใช้งานสามารถปรับขนาดฟอนต์ของเว็บได้ตามใจชอบเพียงแค่ปรับการตั้งค่าจากเบราว์เซอร์ข้อเสีย:
1. ความซับซ้อน: อาจทำให้เกิดความซับซ้อนเมื่อต้องซ้อนหลายชั้นของ Em 2. ความเข้ากันได้: หน่วยเหล่านี้อาจไม่เหมาะสมกับทุกเบราว์เซอร์, ต้องตรวจสอบว่าเบราว์เซอร์ที่เราต้องการรองรับสามารถจัดการหน่วยนี้ได้
การใช้หน่วย Rem และ Em เป็นเครื่องมือที่ทรงพลังในการสร้างการออกแบบที่ยืดหยุ่น การเรียนรู้เรื่องเหล่านี้จะช่วยให้สามารถออกแบบหน้าเว็บไซต์ที่ไม่เพียงแค่ดูดี แต่ยังปรับตัวได้ตามความต้องการของผู้ใช้ ด้วยการใช้ตัวเลือกที่เน้นความเข้ากันได้และการตอบสนองที่ดี หากคุณสนใจที่จะศึกษา CSS เพิ่มเติม หรือค้นหาหลักสูตรการเขียนโปรแกรมที่เน้นการสร้างเว็บไซต์ เราขอแนะนำให้คุณศึกษาได้ที่ EPT โรงเรียนที่เน้นการเรียนการสอนแบบมืออาชีพที่ตอบสนองต่อความต้องการของตลาดในปัจจุบัน
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com