PX และ EM ทำไมต้องให้ต่างกัน

เคยสงสัยไหมครับว่า ทำไม px และ em จึงต้องมีพร้อมๆ กัน

ซึ่ง em ในที่นี้คือหน่วยของความกว้าง ความสูง นะครับ ไม่ใช่ em ที่มักใช้คู่ๆ ไปกับ span อย่าเพิ่งสับสน

ทำไมต้องมี em ??

เคยลองมั้ยครับ เวลาที่เราเข้าเว็บบางเว็บแล้วตัวหนังสือมันเล็ก แล้วเราอยากให้มันใหญ่ขึ้น แต่พอเราเข้าไปที่ Text Size ของ IE แล้วขยายยังไงมันก็ไม่ขึ้น แต่กลับบราวเซอร์ อื่นๆ มันก็ขยายตามความต้องการของเรา หรือจะย่อตัวหนังสือ มันก็ลดลงตามความต้องการ นั่นแหละครับ หน้าเพจนั้น ได้ถูกกำหนดขนาดตัวหนังสือด้วย px ไว้เรียบร้อยแล้ว

ยx ไม่เข้ากับ IE หรือ IE ไม่เข้ากับ px อันนี้ไม่อาจทราบได้ ว่าใครถูกใครผิด หรือใครต้องตามใคร แต่ที่แน่ๆ เราเป็นคนทำเว็บ เว็บนั้นสามารถขึ้นอยู่กับความต้องการของเราได้ IE คนใช้เยอะด้วยสิ แต่ถ้าเราคิดว่า กำหนดตัวหนังสือมห้มันขนาดนี้แหละ คนดูไม่ต้องขยายหรอก เราก็ยืนยันเลยครับ ใช้ px รับรอง ผู้ใช่ IE ขยายตัวหนังสือเราไม่ได้แน่ๆ แต่มันจะดีสำหรับคนผู้ใช้เว็บหรือเปล่าก็ไม่รู้ดิ เผื่อเขาอยากหาข้อมูล อ่านข้อมูลแบบสะดวกๆ ใหญ่ๆ

การแก้ไขที่จะทำให้ ผู้ใช้สามารถเปลี่ยนแปลงตัวหนังสือได้เองทุกๆ บราวเซอร์ จึงต้องหันมาอาศัยหน่าวเป็น em แทน เพื่อที่ผู้ใช้ไออี จะสามารถขยายตัวนังสืออ่านเองได้

คงหายสงสัยกันได้สักห้วงนึงนะครับ

สำหรับหน่วย em เมื่อเทียบกับ px ก็จะประมาณนี้ครับ

1em จะประมาณได้ที่ 16px ถ้าเราจะลด หรือเพิ่ม ก้อ ประมาณการหรือ ลุยทางคณิตศาสตร์กันเองเลยครับ บวก ลบ คูณ หาร ตามสะดวก

แต่ผมก็ยังใช้มันมั่วกันไป มั่วกันมาอยู่เลย

Back to Top

17 Responses to PX และ EM ทำไมต้องให้ต่างกัน

  1. 100z

    Reply

  2. artofid

    px มักใช้กำหนดขนาดเลเอาท์นะครับ เช่น width, height, padding,etc. หมายถึงว่าถ้าคุณกำหนดเลเอาท์แบบ fix นะครับ แต่ถ้าเป็นแบบ % ก็อีกเรื่อง การกำหนดเลเอาท์มักไม่ใช้ em เพราะว่ามันจะเลื่อนตำแหน่งได้ ถ้าเบราซ์เซอร์มีความสามารถในการขยายตามได้ เช่น firefox สุดท้ายจะดีดกระจายไม่เป็นท่า

    การใช้ em มักใช้กำหนดขนาดฟอนต์ ซึ่งจะจะมีการขยายขนาดได้ เพื่อที่บางคนสายตาไม่ดี จะได้กดขยายเพื่อให้อ่านง่ายขึ้น โดยที่ไม่กระทบเลเอาท์ (ถ้าเลเอาท์ไม่พิสดารมาก) โดยมากแล้ว em ใช้เฉพาะการกำหนดขนาดฟอนต์เท่านั้น

    *ข้อควรระวังในการใช้ em

    สมมติว่า คุณกำหนด

    body{

    }

    Reply

  3. the DtTvB

    ปกติผมชอบใช้เป็น % มากกว่าครับ เช่น font-size: 80%;

    แต่บางครั้งเวลาแก้พวก box-model หรืออื่นๆ ที่ไม่เกี่ยวกับ font ก็ชอบใช้ em ครับ เช่น padding: 1em;

    และก็ em นี่มาจาก m-width คือความกว้างของตัว m เล็กในภาษาอังกฤษครับ ไม่แน่ใจนะครับ แต่เอาเท่าที่จำได้

    Reply

  4. พร อันทะ

    อย่างนี้สิครับ มันถึงจะหลากหลาย

    ขอบคุณทุกความรู้ ที่เอามาเพื่อแผ่กันครับ

    Reply

  5. the DtTvB

    ยังมีอีกแบบครับ คือ ex นั่นก็คือ ความสูงของตัว x เล็กในภาษาอังกฤษ

    ส่วนมาก 2ex จะประมาณ 1em ครับ

    Reply

  6. tiamkeaw

    งง อะครับ

    การใช้ em

    ถ้า tag มันซ้อนกันหลายชั้น fจะจont ที่อยู่ในtag ด้านในสุดมัน

    จะเทียบขนาดกับ

    ขนาดของfont ในtag body

    หรือ

    ขนาดของfont ใน tag ก่อนหน้า

    ครับ

    Reply

  7. utt

    em มาจาก emphasize ครับ หมายถึงขนาดจำนวนเท่า เช่น h2 กำหนดเป็น 1.2em จะมีขนาด 1.2 เท่าของfont ที่กำหนด ใน body ซึง default อยู่ที่ 16 px

    ถ้าคุณกำหนด ที่ body ไว้ 12px แล้วกำหนดให้ p เป็น 1.1em มันก็จะได้ ขนาด 1.1 เท่าของ 12px ครับ

    ส่วนถ้า tag ก่อนหน้ามีกำหนดfont-size ไว้ มันก็จะคูณ กับจำนวนที่กำหนดใน tag ครับ ไม่ใช่ body

    <a href="http://www.divland.com">www.divland.com</a&gt;

    Reply

  8. artofid

    px มักใช้กำหนดขนาดเลเอาท์นะครับ เช่น width, height, padding,etc. หมายถึงว่าถ้าคุณกำหนดเลเอาท์แบบ fix นะครับ แต่ถ้าเป็นแบบ % ก็อีกเรื่อง การกำหนดเลเอาท์มักไม่ใช้ em เพราะว่ามันจะเลื่อนตำแหน่งได้ ถ้าเบราซ์เซอร์มีความสามารถในการขยายตามได้ เช่น firefox สุดท้ายจะดีดกระจายไม่เป็นท่า

    การใช้ em มักใช้กำหนดขนาดฟอนต์ ซึ่งจะจะมีการขยายขนาดได้ เพื่อที่บางคนสายตาไม่ดี จะได้กดขยายเพื่อให้อ่านง่ายขึ้น โดยที่ไม่กระทบเลเอาท์ (ถ้าเลเอาท์ไม่พิสดารมาก) โดยมากแล้ว em ใช้เฉพาะการกำหนดขนาดฟอนต์เท่านั้น

    *ข้อควรระวังในการใช้ em

    สมมติว่า คุณกำหนด

    body{

    font-size:0.8em;

    }

    p{

    font-size:0.8em;

    }

    ทีนี้ ความงงจะมาเยือนเมื่อคุณเขียนใน html ว่า

    <p>hello world</p>

    ทีนี้คำว่า hello world จะมีขนาดเท่ากับ 0.8*0.8=0.64 em เพราะมันซ้อนกันอยู่ มันจึงเอาตัวเลขมาคูณกัน ดังนั้นเพื่อความปลอดภัย ควรใช้

    body{

    font-size:1em;

    }

    แล้วทีนี้ตัวอื่นก็กำหนดขนาดอื่นไป เพราะไม่ว่าเลขอะไรคูณ 1 ก็จะเท่ากับเลขตัวนั้น

    Reply

  9. annimal

    ขอบคุณค๊าบท่านจารย์

    Reply

  10. โยคี

    <q> เป็นอะไรที่ผมไม่รู้จักมาก่อนเลยครับ นานแล้วไม่มาเยี่ยม อบบอุ่นดีนะครับ ได้ความรู้ใหม่ ๆ กลับไปทุกที

    Reply

  11. gooogolf

    ว้าววว! ขอบคุณฮะ คุณ artofid

    Reply

  12. TDz

    ผมกำหนดตรง body เป็น pixel ตลอดครับ

    แล้วที่เหลือเป็น em

    Reply

  13. เบียร์

    ขอบคุณครับ

    Reply

  14. HighEnD

    ขอบคุณนะครับ สำหรับบทความดีๆ แต่ว่ารู้สึกว่าลิงค์หน้าตัวอย่างจะเสียทุกหน้าเลยนะ ตรวจสอบด้วยก็จะดีนะครับ แต่ขอบคุณมากจริงๆ

    Reply

  15. bukoilza

    ผมมาหาคำตอบ

     
    ขอบคุณครับพี่ ผมได้ความรู้เพิ่มเติมอีกแล้ว

    Reply

  16. ครั้งแรกกับสิ่งนี้

    สำหรับผู้ที่ไมเคยสัมผัสกับสิ่งนี้มาก่อนเราจะเริ่มต้นการเรียนรู้อย่างไรค่ะ

    Reply

  17. คุริคุริ

    บทความดีมาก เอาไปปฎิบัติได้เลย
    แต่ Em ไม่ได้มาจาก Emphasize นะ

    Em มาจากตัวอักษร ‘M’ อ่านว่าเอ็ม เป็นหน่วยวัดตัวอักษรสำหรับงานสิ่งพิมพ์จ้า

    http://en.wikipedia.org/wiki/Em_(typography)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top