ความแตกต่างระหว่าง REM กับ EM ใน CSS

Web Development

ความแตกต่างระหว่าง REM กับ EM ใน CSS

ในบทความนี้จะมารู้จักหน่วยวัดใน CSS นอกจาก px กัน นั่นก็คือ REM กับ EM นั่นเอง ซึ่งมีความยืดหยุ่นในการใช้งานมาก

มากกว่า 1 ปีที่ผ่านมา

1 min read

ทั้ง REM กับ EM คือ Unit ที่ใช้ในการกำหนดขนาดของ Font ใน CSS โดยทั้งสองมีความแตกต่างกันอยู่เล็กน้อย มาดูกัน

REM

โดย REM จะอ้างอิงจากขนาดของ Font ที่กำหนดไว้ใน Root Element

EM

EM ก็เหมือน REM แต่เปลี่ยนการอ้างอิงจาก Root Element เป็น Parent Element แทน

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-size: 18px;
      }
 
      .container {
        font-size: 2rem;
      }
 
      h1 {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h1>Heading REM</h1>
    <div class="container">
      <h1>Heading EM</h1>
    </div>
  </body>
</html>

อธิบาย Code ด้านบน

  • กำหนด font-size ให้กับ body เป็น 18px ซึ่งก็คือให้อ้างอิงตาม root element
  • กำหนด font-size ให้กับ .container เป็น 1.5rem ซึ่งก็คือให้อ้างอิงตาม root element
  • กำหนด font-size ให้กับ h1 เป็น 2em ซึ่งก็คือให้อ้างอิงตาม parent element

ผลลัพธ์

จะเห็นว่า h1 ที่อยู่นอกกับใน container จะมีขนาดต่างกัน เพราะอ้างอิงกันคนละ element

Rem vs Em
Rem vs Em

ข้อมูลเพิ่มเติม

Tags:

CSS

บทความอื่นๆ

ดูความที่คุณอาจจะสนใจ ได้จากบทความข้างใต้นี้