ฉันได้ยินมาว่าคุณควรกำหนดขนาดและระยะทางในสไตล์ชีทของคุณด้วย em แทนที่จะเป็นพิกเซล ดังนั้นคำถามคือทำไมฉันควรใช้ em แทน px เมื่อกำหนดสไตล์ใน css มีตัวอย่างที่ดีที่แสดงสิ่งนี้หรือไม่

มันผิดที่จะบอกว่ามีตัวเลือกที่ดีกว่าตัวเลือกอื่น (หรือทั้งสองอย่างจะไม่ได้รับวัตถุประสงค์ของตัวเองในสเป็ค) อาจเป็นเรื่องที่น่าสังเกตว่า StackOverflow ใช้หน่วย px อย่างกว้างขวาง มันไม่ใช่ตัวเลือกที่แย่ Spoike บอกว่ามันเป็น

ความหมายของหน่วย

• pxคือหน่วยการวัดสัมบูรณ์ (เช่นin , ptหรือcm ) ที่เกิดขึ้นเป็น 1/96 ของหน่วยin (ด้วยเหตุผลเพิ่มเติมในภายหลัง) เนื่องจากเป็นการวัดแบบสัมบูรณ์อาจใช้เมื่อใดก็ได้ที่คุณต้องการกำหนดสิ่งที่จะเป็นขนาดเฉพาะแทนที่จะเป็นสัดส่วนกับสิ่งอื่นเช่นขนาดของหน้าต่างเบราว์เซอร์หรือขนาดแบบอักษร

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

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

  การวัดสัมบูรณ์ทั้งหมดเกี่ยวข้องอย่างเหนียวแน่นซึ่งกันและกัน นั่นคือ1inเป็นเสมอ 96 พิกเซลเช่นเดียวกับ1inเป็นเสมอ 72pt (โปรดทราบว่า1inแทบไม่เคยเป็นนิ้วจริงเมื่อพูดถึงสื่อบนหน้าจอ) การวัดสัมบูรณ์ทั้งหมดถือว่าความละเอียดหน้าจอเล็กน้อยที่ 96ppi และระยะการรับชมเล็กน้อยของจอภาพเดสก์ท็อปและบนหน้าจอหนึ่งพิกเซลจะเท่ากับพิกเซลทางกายภาพหนึ่งรายการบนหน้าจอและอีกหนึ่งในจะเท่ากับ 96 ฟิสิคัลพิกเซล บนหน้าจอที่แตกต่างกันอย่างมากในความหนาแน่นของพิกเซลหรือระยะทางในการดูหรือหากผู้ใช้ซูมหน้าโดยใช้ฟังก์ชั่นซูมของเบราว์เซอร์pxจะไม่เกี่ยวข้องกับพิกเซลทางกายภาพอีกต่อไป

• emไม่ใช่หน่วยสัมบูรณ์ - เป็นหน่วยที่สัมพันธ์กับขนาดแบบอักษรที่เลือกในปัจจุบัน นอกจากว่าคุณมีรูปแบบตัวอักษรที่ถูกแทนที่ด้วยการตั้งค่าขนาดตัวอักษรของคุณด้วยหน่วยสัมบูรณ์ (เช่นpxหรือpt ) สิ่งนี้จะได้รับผลกระทบจากการเลือกแบบอักษรในเบราว์เซอร์ของผู้ใช้หรือระบบปฏิบัติการ ใช้ em เป็นหน่วยความยาวทั่วไปยกเว้นตำแหน่งที่คุณต้องการให้ขนาดเป็นการปรับขนาดแบบอักษร

  ใช้emเมื่อคุณต้องการให้ขนาดของบางอย่างขึ้นอยู่กับขนาดแบบอักษรปัจจุบัน

• %เป็นหน่วยที่สัมพันธ์กันในกรณีนี้สัมพันธ์กับความสูงหรือความกว้างขององค์ประกอบหลัก เป็นทางเลือกที่ดีสำหรับหน่วยpxสำหรับสิ่งต่าง ๆ เช่นความกว้างโดยรวมของการออกแบบหากการออกแบบของคุณไม่ได้อาศัยขนาดพิกเซลที่เฉพาะเจาะจงเพื่อกำหนดขนาดของมัน

  การใช้หน่วย%ในการออกแบบของคุณช่วยให้การออกแบบของคุณปรับให้เข้ากับความกว้างของหน้าจอ / อุปกรณ์ในขณะที่ใช้หน่วยสัมบูรณ์เช่นpxไม่ได้

ฉันมีแล็ปท็อปขนาดเล็กที่มีความละเอียดสูงและต้องใช้ Firefox ในการซูมข้อความ 120% เพื่อให้สามารถอ่านได้โดยไม่ต้องเหล่

เว็บไซต์หลายแห่งมีปัญหากับสิ่งนี้ เค้าโครงกลายเป็นสิ่งที่อ่านไม่ออกทั้งหมดข้อความในปุ่มถูกตัดครึ่งหรือหายไปทั้งหมด แม้แต่ stackoverflow.com ก็ยังทนทุกข์กับมัน:

สังเกตว่าปุ่มด้านบนและแท็บหน้าทับกันอย่างไร หากพวกเขาจะใช้หน่วย em แทน px จะไม่มีปัญหา

เหตุผลที่ฉันถามคำถามนี้คือฉันลืมวิธีใช้ em ในขณะที่ฉันกำลังแฮ็คอย่างมีความสุขใน CSS ผู้คนไม่ได้สังเกตว่าฉันเก็บคำถามทั่วไปไว้เพราะฉันไม่ได้พูดถึงการปรับขนาดตัวอักษรต่อ se ฉันสนใจวิธีกำหนดสไตล์ขององค์ประกอบบล็อกที่กำหนดในหน้า

ดังที่Henrik Paulและคนอื่น ๆ ชี้ให้เห็นว่า em เป็นสัดส่วนกับขนาดตัวอักษรที่ใช้ในองค์ประกอบ เป็นการปฏิบัติทั่วไปในการกำหนดขนาดขององค์ประกอบบล็อกใน px อย่างไรก็ตามการปรับขนาดแบบอักษรในเบราว์เซอร์มักจะทำให้การออกแบบนี้แตก ปรับขนาดอักษรจะทำโดยทั่วไปกับปุ่มลัดCtrl+ +หรือ+Ctrl -ดังนั้นวิธีปฏิบัติที่ดีคือการใช้อีเอ็มแทน

ใช้ px เพื่อกำหนดความกว้าง

นี่คือตัวอย่างที่แสดง สมมติว่าเรามีแท็ก div ที่เราต้องการเปลี่ยนเป็นกล่องวันที่มีสไตล์เราอาจมีโค้ด HTML ที่มีลักษณะดังนี้:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

การใช้งานอย่างง่ายจะกำหนดความกว้างของdate-boxคลาสใน px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

ปัญหา

อย่างไรก็ตามหากเราต้องการเพิ่มขนาดของข้อความในเบราว์เซอร์การออกแบบจะแตก ข้อความจะมีเลือดออกนอกกรอบซึ่งเกือบจะเหมือนกันกับสิ่งที่เกิดขึ้นกับการออกแบบของ SO เมื่อflodinชี้ให้เห็น 50pxนี้เป็นเพราะกล่องจะยังคงมีขนาดเท่ากันในความกว้างตามที่มีการล็อค

ใช้ em แทน

วิธีที่ชาญฉลาดคือการกำหนดความกว้างเป็น EMS แทน:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

ด้วยวิธีนี้คุณจะมีการออกแบบที่ลื่นไหลบนกล่องวันที่นั่นคือกล่องจะมีขนาดใหญ่ขึ้นพร้อมกับข้อความตามสัดส่วนขนาดตัวอักษรที่กำหนดสำหรับกล่องวันที่ ในตัวอย่างนี้ขนาดแบบอักษรถูกกำหนด*เป็น 10 พอยต์และจะเพิ่มขนาด 2.5 เท่าเป็นขนาดแบบอักษรนั้น ดังนั้นเมื่อคุณปรับขนาดฟอนต์ในเบราว์เซอร์กล่องจะมีขนาดของฟอนต์นั้น 2.5 เท่า

ด้านบนได้รับการโหวตจากคำตอบที่นี่ thomasrutter เป็นสิทธิในการตอบสนองของเขาเกี่ยวกับอีเอ็ม แต่ผิดมากเกี่ยวกับขนาดของพิกเซล ดังนั้นถึงแม้ว่ามันจะเก่า แต่ฉันก็ไม่สามารถปล่อยให้มันไม่ถูกบ่อนทำลายได้

หน้าจอคอมพิวเตอร์ปกติไม่ 96dpi! (หรือ ppi หากคุณต้องการอวดความสนใจ)

พิกเซลไม่มีขนาดจริงคงที่
(ใช่มันได้รับการแก้ไขภายในหนึ่งหน้าจอเท่านั้น แต่ในหน้าจอถัดไปพิกเซลมีแนวโน้มมากที่สุดที่ใหญ่กว่าหรือเล็กกว่าและไม่แน่นอน 1/96 ของนิ้ว.)


หลักฐานการ
วาดเส้น, 960 พิกเซลยาว วัดด้วยไม้บรรทัดทางกายภาพ มันคือ 10 นิ้วหรือไม่ ไม่ .. ?
เชื่อมต่อแล็ปท็อปของคุณเข้ากับทีวี ตอนนี้สาย 10 นิ้วอยู่หรือไม่? ไม่สงบ?
แสดงบรรทัดบน iPhone ของคุณ ยังมีขนาดเท่าเดิมหรือ ทำไมจะไม่ล่ะ?

ใครเป็นคนคิดค้นตำนานหน้าจอคอมพิวเตอร์ 96dpi
(บางศาสนาทำงานด้วยตำนาน 72dpi แต่ผิดเหมือนกัน)

มันใช้สำหรับทุกสิ่งที่มีการปรับขนาดตามขนาดตัวอักษร

มันมีประโยชน์อย่างยิ่งในเบราว์เซอร์ที่ใช้การซูมโดยปรับขนาดตัวอักษร ดังนั้นถ้าคุณปรับขนาดองค์ประกอบทั้งหมดของคุณโดยใช้emพวกเขาปรับขนาดตาม

เนื่องจาก em ( http://en.wikipedia.org/wiki/Em_(typography) ) เป็นสัดส่วนโดยตรงกับขนาดแบบอักษรที่ใช้อยู่ในปัจจุบัน หากขนาดตัวอักษรคือพูด 16 คะแนนหนึ่ง em คือ 16 คะแนน หากขนาดตัวอักษรของคุณคือ 16 พิกเซล ( หมายเหตุ : ไม่เหมือนกับจุด) หนึ่ง em คือ 16 พิกเซล

สิ่งนี้นำไปสู่สองสิ่ง (เกี่ยวข้อง):

1. มันเป็นเรื่องง่ายที่จะรักษาสัดส่วนถ้าคุณเลือกที่จะแก้ไขขนาดตัวอักษรใน CSS ของคุณในภายหลัง
2. เบราว์เซอร์จำนวนมากรองรับขนาดแบบอักษรที่กำหนดเองแทนที่ CSS ของคุณ หากคุณออกแบบทุกอย่างเป็นพิกเซลเค้าโครงของคุณอาจแตกในกรณีนี้ แต่ถ้าคุณใช้ ems การแก้ปัญหาเหล่านี้ควรช่วยบรรเทาปัญหาเหล่านี้

ตัวอย่าง:

รหัส: body {font-size: 10px;} // เก็บที่ 10 ทุกขนาดด้านล่างถูกต้องเปลี่ยนค่านี้และการเปลี่ยนแปลงที่เหลือเป็นเช่น 1.4 ของค่านี้

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

...

ร่างกาย

1

2

3

4

5

โดยการเปลี่ยนค่าในร่างกายส่วนที่เหลือจะเปลี่ยนโดยอัตโนมัติเป็นชนิดของค่าฐาน ...

10 × 2 = 20 10 × 1.6 = 16 ฯลฯ

คุณสามารถมีค่าฐานเป็น 8px …ดังนั้น 8 × 2 = 16 8 × 1.6 = 12.8 // อาจถูกปัดเศษโดยเบราว์เซอร์

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

ใช้ px สำหรับการวางองค์ประกอบกราฟิกที่แม่นยำ ใช้ em สำหรับการวัดที่ต้องทำการวางตำแหน่งและเว้นระยะห่างรอบองค์ประกอบข้อความเช่น line-height เป็นต้น px มีความแม่นยำของพิกเซล em สามารถเปลี่ยนแบบไดนามิกได้ด้วยตัวอักษรที่ใช้งาน

เหตุผลหลักสำหรับการใช้ em หรือเปอร์เซนต์คืออนุญาตให้ผู้ใช้เปลี่ยนขนาดตัวอักษรโดยไม่ทำให้การออกแบบหยุดชะงัก หากคุณออกแบบด้วยตัวอักษรที่ระบุไว้ใน px พวกเขาไม่ได้เปลี่ยนขนาด (ใน IE 6 และอื่น ๆ ) ถ้า Chooses ผู้ใช้ขนาดตัวอักษร - ขนาดใหญ่ สิ่งนี้ไม่ดีมากสำหรับผู้ใช้ที่มีแต้มต่อทางสายตา

สำหรับตัวอย่างและบทความเกี่ยวกับการออกแบบเช่นนี้ (มีให้เลือกมากมาย) ดูฉบับล่าสุดของ A List Apart: Fluid Grids , บทความที่เก่ากว่าวิธีปรับขนาดข้อความใน CSSหรือการออกแบบเว็บ Bulletproofของ Dan Cederholmกระสุนออกแบบเว็บ

รูปภาพของคุณควรจะแสดงด้วยขนาด px แต่โดยทั่วไปจะไม่ถือว่าเป็นรูปแบบที่ดีในการกำหนดขนาดข้อความด้วย px

เท่าที่ฉันดูถูกส่วนตัว IE6 ปัจจุบันเป็นเบราว์เซอร์เดียวที่ได้รับการอนุมัติสำหรับผู้ใช้จำนวนมากใน บริษัท Fortune 200 ของเรา

มีวิธีแก้ไขอย่างง่ายหากคุณต้องการใช้ px เพื่อระบุขนาดตัวอักษร แต่ยังต้องการความสะดวกในการใช้งานที่ em จัดเตรียมไว้ให้ในไฟล์ CSS ของคุณ:

body {
  font-size: 62.5%;
}

ตอนนี้ระบุpแท็กคุณ(และอื่น ๆ ) เช่นนี้:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

และอื่น ๆ

คุณอาจต้องการใช้ em สำหรับขนาดตัวอักษรจนกว่า IE6 จะหายไป (จากไซต์ของคุณ) Px จะไม่เป็นไรเมื่อการซูมหน้า (ตรงข้ามกับการซูมข้อความ) กลายเป็นพฤติกรรมมาตรฐาน

Traingamer จัดเตรียมลิงก์ที่จำเป็นไว้แล้ว

Pixelเป็นหน่วยสัมบูรณ์โดยที่rem / emเป็นหน่วยที่สัมพันธ์กัน สำหรับข้อมูลเพิ่มเติม: https://drafts.csswg.org/css-values-3/

คุณควรใช้หน่วยที่เกี่ยวข้องเมื่อคุณต้องการปรับขนาดแบบอักษรตามขนาดแบบอักษรของระบบเนื่องจากระบบให้ค่าขนาดแบบอักษรให้กับองค์ประกอบรากซึ่งเป็นองค์ประกอบ HTML

ในกรณีนี้ที่เปิดหน้าเว็บใน google chrome ขนาดตัวอักษรขององค์ประกอบ HTML จะถูกกำหนดโดย chrome ลองเปลี่ยนเพื่อดูผลกระทบบนหน้าเว็บด้วยแบบอักษรของหน่วย rem / em

หากคุณใช้pxเป็นหน่วยสำหรับแบบอักษรแบบอักษรจะไม่ปรับขนาดในขณะที่แบบอักษรที่มีrem/emหน่วยจะเปลี่ยนขนาดเมื่อคุณเปลี่ยนขนาดแบบอักษรของระบบ

ดังนั้นใช้pxเมื่อคุณต้องการแก้ไขขนาดและใช้rem/ emเมื่อคุณต้องการปรับขนาด / ปรับให้เข้ากับขนาดของระบบ

ฉันทามติทั่วไปคือการใช้ร้อยละสำหรับการปรับขนาดตัวอักษรเพราะมันสอดคล้องกันมากขึ้นในเบราว์เซอร์ / แพลตฟอร์ม

มันตลก แต่ฉันมักจะใช้ pt เพื่อปรับขนาดตัวอักษรและฉันคิดว่าทุกไซต์ใช้สิ่งนั้น ปกติคุณจะไม่ใช้ขนาด px ในแอปอื่น (เช่น Word) ฉันเดาว่าเป็นเพราะพวกเขากำลังพิมพ์ - แต่ขนาดเท่ากันในเว็บเบราว์เซอร์เช่นเดียวกับใน Word ...

หลีกเลี่ยงการใช้ em หรือ px rem แทนเพราะง่ายต่อการค้นหาค่าที่คำนวณได้ แต่ระหว่าง em และ px, px ดีกว่าเพราะ em ยากต่อการดีบัก