ความแตกต่างระหว่าง px em rem พร้อมตัวอย่าง

TLDR;

บทความนี้สรุป px, em, rem ซึ่งเป็น 3 unit ที่ใช้บ่อยๆในการกำหนดขนาดใน css

px เป็น absolute unit ไม่ขึ้นอยู่กับใคร
em เป็น relative unit ที่ขึ้นอยู่กับค่าของ parent element
rem เป็น relative unit ที่ขึ้นอยู่กับค่าของ root element

px (pixel – พิกเซล)

เป็นหน่วยที่ใช้กันทั่วๆไปในงาน digital
เป็นหน่วยแบบ absolute unit เอาไปใช้ตรงๆเลย ไม่ต้องคิดมาก
ถ้าดีไซน์เนอร์ส่งงานมาว่าใช้ font ขนาด 16px เราก็เอาไปเขียนเลยว่า font-size: 16px;
ไม่มีอะไรพิเศษ :P

em (เอ็ม)

เป็นหน่วยแบบ relative unit = ค่าขึ้นอยู่กับค่าอื่น
ค่าอื่นในที่นี้ ก็คือค่าที่ได้มาจาก parent element

ตัวอย่าง em

<body>
	<p>Paragraph text</p>
</body>

body {
font-size: 16px;
}

p {
font-size: 1em;
}

ในกรณีนี้ p ที่ตั้งค่าไว้ 1em จะมีขนาดบนหน้าจอ 16px
วิธีการคำนวณคือ เอาเลข em ไปคูณกับ ค่าของ body (body เป็น parent element ของ p)
body มีขนาด 16px - p = 1em → ขนาดบนหน้าจอจะเป็น 1 × 16 = 16px - p = 1.125em → ขนาดบนหน้าจอจะเป็น 1.125 × 16 = 18px

สถานการณ์ที่ควรใช้ em: การทำแสดงเวลาแบบสากล เช่น 11am

<time>11<span>AM</span></time>

time {
  font-size: 16px;
}

span {
  font-size: 0.75em;
}

จากตัวอย่างด้านบน

11 จะมีขนาด 16px
ส่วน AM จะมีขนาด 0.75 × 16 = 12px

ข้อดีคือ

ถ้า time ขยายขนาดใหญ่ขึ้น เช่น จาก 16px → 24px
AM จะขยายใหญ่ขึ้นอัตโนมัติด้วย โดยมีขนาด 0.75 × 24 = 18px

จะเห็นว่า em เหมาะสำหรับการตั้งค่าให้สอง element มีความสัมพันธ์กันเพื่อที่จะไม่ต้องมาคอยตั้งค่าใหม่ซ้ำๆ

ข้อควรระวัง: การใช้ em ซ้อนๆกันหลาย element จะจัดการยาก เพราะมันจะทบค่ากันไปเรื่อยๆ

rem (เร็ม)

เป็น relative unit (เหมือน em) ที่ค่าขึ้นอยู่กับค่าอื่น
ค่าอื่นในที่นี้คือ root element (<html>)

ตัวอย่าง rem

html {
  font-size: 32px;
}

body {
  font-size: 16px;
}

p {
  font-size: 1rem;
}

ในกรณีนี้ p ที่ตั้งค่าไว้ 1rem จะมีขนาดบนหน้าจอ 32px (ยึดตามค่า html)
แต่ถ้า p ตั้งค่าไว้เป็น 1em ก็จะมีขนาดบนหน้าจอ 16px แทน (ยึดตามค่า parent element = body)

สถานการณ์ที่ควรใช้ rem: การทำ responsive design ให้ขยายตัวหนังสือ เมื่อหน้าจอใหญ่ขึ้น

<html>
  <body>
    <h1>Heading text</h1>
    <p>Paragraph text</p>
  </body>
</html>

html {
  font-size: 16px;
}

body {
  font-size: 99px;
}

h1 {
  font-size: 1.125rem;
}

p {
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 24px;
  }
}

จะเห็นว่า ในขนาดหน้าจอ mobile

h1 จะมีขนาด 1.125 × 16 = 18px
p จะมีขนาด 1 × 16 = 16px

เมื่อหน้าจอขยายใหญ่ขึ้นเป็น tablet (ขนาด 768px ขึ้นไป)

h1 จะมีขนาด 1.125 × 24 = 27px
p จะมีขนาด 1 × 24 = 24px

จะเห็นว่า style ของ parent element (font-size: 99px จาก body) จะไม่มีผลต่อ h1 กับ p เลย

rem ทำให้เราสามารถจัดการขนาดของทุกตัวอักษรได้ ด้วยการปรับที่ html ที่เดียว ซึ่งสะดวกมากๆ

สรุปอีกที

px เป็น absolute unit ไม่ขึ้นอยู่กับใคร
em เป็น relative unit ที่ขึ้นอยู่กับค่าของ parent element
rem เป็น relative unit ที่ขึ้นอยู่กับค่าของ root element

มารัช.ดีไซน์