CSS units px, em , rem ใช้อะไร ใช้อย่างไร

ทุกคนอาจจะเคยผ่านตามาบ้างแล้วสำหรับ พวกหน่วยต่าง ๆ ไม่ว่าจะเป็น px , em , rem แล้วมันคืออะไรละ ใช้ต่างกันอย่างไร วันนี้ผมก็จะมาอธิบายให้ฟัง เพื่อเป็นทางเลือกในการใช้นะครับ

เรามาเริ่มที่ px ก่อนเลยละกัน เป็นหน่วยที่ยอดฮิตมาก คิดไม่ออกบอก px ไว้ก่อน เป็นการกำหนดขนาดแบบตายตัว คือกำหนดไว้เท่าไรคือเท่านั้นเลย

ส่วน em นั้น เป็น relative ซึ่งขนาดของ em นั้น จะขึ้นอยู่กับ parent element ที่อยู่ใกล้ที่สุดโดย 1 em จะเท่ากับ 1 เท่าของขนาด font-size ของ parent element ถ้า font-size ของ parent element มีค่าเท่ากับ 18px ผมจะยกตัวอย่างให้เห็นภาพของ em มากขึ้นโดยการเขียน css ไว้ดังนี้

ผลลัพธ์ที่ได้

จากภาพ.gif จะเห็นได้ว่า แต่ละ element จะมีขนาด font-size ลดลงครึ่งหนึ่งเนื่องจากเรากำหนด div ไว้ว่าให้มี font-size : 0.5em แล้ว หน่วย em นั้นจะขึ้นอยู่กับขนาด font-size ของ parent element

จากรูปแสดงให้เห็นว่า em มีค่าไม่ตายตัวขึ้นอยู่กับขนาดของ BASE

แล้ว rem ละ? rem นั้นก็คล้าย ๆ กับ em คือเป็น relative จะมีจุดต่างกันก็คือ rem นั้นหมายถึง (root em) ซึ่งค่าของมันไม่ได้ขึ้นอยู่กับ element parent แต่จะขึ้นอยู่กับขนาดของ root element ซึ่งปกติ base font-size จะอยู่ที่ 16px แล้วเราสามารถแก้ค่า font-size ของ root element ได้ไหม? คำตอบคือได้ครับ เพียงเขียน 
html { font-size: XXpx} เข้าไปใน ไฟล์ css

จะสรุปได้ว่า
px เป็นหน่วยที่ตายตัว
em เป็น relative ที่จะขึ้นอยู่กับ parent element
rem เป็น relative ที่ขึ้นอยู่กับ root element

ที่ผมยกมาเป็นแค่บางส่วนของ Unit ทุกคนสามารถเข้าไปดูเพิ่มเติมได้ที่
https://developer.mozilla.org/en-US/docs/Web/CSS/length หรือใครมีอะไรที่อยากแชร์ก็สามารถแชร์กันได้นะครับ

Ref: 
https://internetingishard.com/html-and-css/hello-css/
http://www.mindphp.com/forums/viewtopic.php?f=73&t=30530
https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css