หน่วย px, em, rem แตกต่างกันอย่างไร

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
M030
PHP Super Hero Member
PHP Super Hero Member
Posts: 532
Joined: 07/09/2015 10:06 am

หน่วย px, em, rem แตกต่างกันอย่างไร

Post by M030 »

เชื่อว่าหลายๆคนถ้าเคยจับ css คงเคยเห็นหน่วยที่ใช้กำหนดขนาดที่เป็น px, em, rem แล้วเคยมีคำถามว่ามันแตกต่างกันอย่างไรมั้ยค่ะ วันนี้เราจะนำคำตอบมาฝากค่ะ ว่าแต่ละหน่วยควรนำมาใช้งานยังไง ^^

px (Pixel)
เป็นการกำหนดขนาดที่ตายตัว ซึ่งเป็นหน่วยที่นิยมใช้กันอย่างมาก ซึ่งทุกคนอาจจะคุ้นตาเป็นพิเศษเพราะ px นั้นยังเป็นที่นิยมใช้กันอยู่ ข้อดีของหน่วยนี้ก็คือ การแสดงผลของขนาดที่กำหนดจะคงที่ ไม่ว่าจะเปิดกับอุปกรณ์อะไร ขนาดความละเอียดหน้าจอเท่าไหร่ หรือจะใช้ Browser อะไรก็ไม่มีปัญหา ส่วนข้อเสีย คือผู้ใช้งานจะไม่สามารถปรับขนาดของข้อความได้ เช่น ในบาง Browser จะมีฟังก์ชั่นให้สามารถปรับลดขนาดของข้อความในการแสดงผลได้ ซึ่งถ้าหากเรากำหนดหน่วยแบบ px ลงไปจะทำให้ไม่สามารถที่จะปรับลดขนาดได้เลย

em
เป็นการกำหนดขนาดแบบไม่ตายตัว (Relative) หากเรากำหนดขนาดด้วย em ผู้ใช้ก็สามารถปรับลดขนาดของข้อความได้ด้วยฟังก์ชันที่มีอยู่ใน Browser ซึ่งการกำหนดขนาดแบบ emนั้นจะคิดจากค่าเดิมของ Element ที่เป็น Parent ที่ใกล้กับมันมากที่สุด หรือค่าเริ่มต้นที่แต่ละ Browser กำหนด ซึ่งโดยส่วนใหญ่แล้ว ตัวอักษรเริ่มต้นจะมีขนาดเท่ากับ 16px โดย 1em จะเท่ากับ 100% หรือคิดเป็น 1เท่า ของค่าเริ่มต้นนั่นเอง เช่น

Code: Select all

h1 {font-size: 2.4em; } / * = 24px * /
p {font-size: 1.4em; } / * = 14px * /
 
ข้อเสีย คือ การใช้หน่วยแบบ em ในบาง Browser ยังมีปัญหาซึ่งจะแสดงผลออกมาไม่เหมือนกัน เล็กบ้าง ใหญ่บ้าง ซึ่งไม่เหมาะกับการอ่าน และอย่าลืมว่าการใช้งาน em นั้นจะทำการกำหนดขนาดเป็น 1 เท่าของ Element ที่เป็น Parent ที่ใกล้กับมันเสมอ

rem
จากปัญหาในการกำหนดขนาดด้วย em นั้น ใน CSS3 จึงออกหน่วยใหม่นั้นก็คือ rem(Root em) เพิ่มเข้ามา โดยหน่วย rem นี้ จะมีคุณสมบัติเหมือนกับหน่วย em แทบทุกประการ เพียงแต่ rem จะเทียบขนาดกับ Root Element ซึ่งก็คือ HTML เสมอจึงทำให้เราได้ขนาดที่ต้องการซึ่งก็คือ 1 เท่าของ Root Element เช่น

Code: Select all

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
 

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 25105
Joined: 31/03/2014 10:02 am
Contact:

Re: หน่วย px, em, rem แตกต่างกันอย่างไร

Post by thatsawan »

แล้วถ้าเป็น vw, vh, , vmin มันคืออะไรค่ะ พอจะรู้บ้างไหม เคยเจอ ในการใช้งาน CSS

Code: Select all

font-size: 7vw; 


Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests