หน่วยสัมพัทธ์: em และ rem
กำหนดขนาดองค์ประกอบโดยอ้างอิงขนาดแบบอักษรขององค์ประกอบแม่หรือรากด้วยหน่วย em และ rem
หน่วยสัมพัทธ์: em และ rem เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
หน่วยสัมพัทธ์คืออะไร
หน่วยสัมพัทธ์จะปรับขนาดโดยอิงจากการวัดค่าอื่น ซึ่งโดยทั่วไปคือขนาดแบบอักษรขององค์ประกอบหรือของราก หน่วยเหล่านี้ช่วยให้สร้างการออกแบบที่ปรับขนาดได้และตอบสนองได้ดี พร้อมเคารพการตั้งค่าของผู้ใช้
em — อิงตามขนาดแบบอักษรขององค์ประกอบแม่
em อิงตาม ขนาดแบบอักษรขององค์ประกอบปัจจุบัน (เมื่อใช้กับขนาดแบบอักษรเอง) หรืออิงตามองค์ประกอบแม่ (เมื่อใช้กับพร็อพเพอร์ตีอื่น) ซึ่งอาจทำให้ค่าเพิ่มทบกันได้
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
em สำหรับระยะห่าง
เมื่อใช้ em กับ padding, margin หรือ border-radius ค่านี้จะอิงตามขนาดแบบอักษรขององค์ประกอบนั้นเอง ทำให้คอมโพเนนต์ปรับขนาดตามสัดส่วน
<button class="button">Padded Button</button>
rem — อิงตามขนาดแบบอักษรของราก
rem (em ของราก) อิงตาม ขนาดแบบอักษรขององค์ประกอบราก (html) ค่านี้จะไม่เพิ่มทบกันและคาดเดาได้ตลอดทั้งหน้า
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
rem และการเข้าถึงของผู้ใช้
หากผู้ใช้เพิ่มขนาดแบบอักษรพื้นฐานของเบราว์เซอร์ (เช่น จาก 16px เป็น 20px เพื่อให้อ่านง่ายขึ้น) หน่วย rem จะปรับขนาดตาม แต่หน่วย px แบบคงที่จะไม่ปรับ นี่คือเหตุผลที่แนะนำให้ใช้ rem กับตัวอักษรเป็นอย่างยิ่ง
ขนาดแบบอักษรของ html เป็นเปอร์เซ็นต์
กำหนดขนาดแบบอักษรของรากเป็นเปอร์เซ็นต์เพื่อเคารพการตั้งค่าของเบราว์เซอร์ที่ผู้ใช้กำหนด:
<p>Root font-size respects the browser/user default (100%).</p>
การเลือกใช้ em กับ rem
แนวทางใช้งานจริง:
- ใช้
remกับขนาดแบบอักษร โทเค็นระยะห่าง และการวัดขนาดเลย์เอาต์ - ใช้
emกับระยะห่างภายในคอมโพเนนต์ที่ควรปรับตามขนาดแบบอักษรของคอมโพเนนต์ (เช่น padding ของปุ่ม)
em ในคำสั่งสื่อ
คำสั่งสื่อที่ระบุด้วย em จะตอบสนองต่อการเปลี่ยนแปลงขนาดแบบอักษรของเบราว์เซอร์ จุดแบ่ง 48em = 768px เมื่อใช้การตั้งค่าเริ่มต้น แต่จะปรับตามหากผู้ใช้เปลี่ยนขนาดแบบอักษรพื้นฐาน
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
การคำนวณ em
สูตรคือ: desired px / parent px = em value หากองค์ประกอบแม่มีขนาด 16px และต้องการข้อความขนาด 24px: 24/16 = 1.5em
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
ปัญหา em ที่เพิ่มทบกัน
การซ้อนองค์ประกอบที่มีขนาดเป็น em ทำให้ขนาดแบบอักษรเพิ่มทบกันแบบทวีคูณ นี่คือเหตุผลที่นิยมใช้ rem กับขนาดแบบอักษรมากกว่า เพราะ rem จะอ้างอิงรากเสมอ จึงป้องกันการเพิ่มทบกัน
ch — ความกว้างของอักขระ
หน่วย ch มีค่าเท่ากับความกว้างของอักขระ "0" ในแบบอักษรปัจจุบัน มีประโยชน์สำหรับจำกัดคอนเทนเนอร์ข้อความให้มีความยาวบรรทัดที่อ่านง่าย:
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
ตรวจสอบอย่างรวดเร็ว
ปุ่มหนึ่งมี font-size: 1.25rem และ padding: 0.5em หากขนาดแบบอักษรของรากคือ 16px padding จะมีค่าเป็นกี่พิกเซล
สรุปทบทวน
em จะปรับขนาดโดยอิงตามขนาดแบบอักษรขององค์ประกอบปัจจุบัน (หรืออิงตามองค์ประกอบแม่เมื่อใช้กับขนาดแบบอักษรเอง) จึงอาจเพิ่มทบกันได้ ส่วน rem จะปรับขนาดโดยอิงตามรากเสมอและไม่เพิ่มทบกัน ใช้ rem กับตัวอักษรและระยะห่างทั่วทั้งหน้า ใช้ em กับระยะห่างภายในคอมโพเนนต์ที่ควรปรับตามสัดส่วน
คำถามที่พบบ่อย
บทเรียน “หน่วยสัมพัทธ์: em และ rem” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “หน่วยสัมพัทธ์: em และ rem” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “หน่วยสัมพัทธ์: em และ rem”
กำหนดขนาดองค์ประกอบโดยอ้างอิงขนาดแบบอักษรขององค์ประกอบแม่หรือรากด้วยหน่วย em และ rem คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “หน่วยสัมพัทธ์: em และ rem” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- หน่วยสัมบูรณ์: px pt และ cm
- หน่วยสัมพัทธ์: em และ rem
- หน่วยพื้นที่แสดงผล: vw vh และ dvh
- ฟังก์ชัน Min Max และ Clamp