ems ยังเกี่ยวข้องหรือไม่

ความเข้าใจของฉันจากการอ่านหัวข้อเช่นนี้คือจุดของ EMS คือการกำหนดการวัดทั้งหมดในหน้าเว็บของคุณด้วยขนาดตัวอักษรพื้นฐานซึ่งสามารถตั้งค่าได้โดยเบราว์เซอร์ของคุณ

ยกตัวอย่างเช่นใน Chrome settings -> show advanced settings -> web content -> font size: very largeที่คุณสามารถทำเช่นนี้ได้โดยไป ฉันอาจทำสิ่งนี้ถ้าฉันใช้จอมอนิเตอร์ความละเอียดสูงขนาดใหญ่ที่อยู่ไกล

ฉันสร้างพลั่วเกอร์ที่แสดงความแตกต่างระหว่าง ems และ px ในการปรับขนาด

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

หากในเบราว์เซอร์ของฉันฉันตั้งขนาดตัวอักษรเป็นขนาดกลาง div เหล่านี้จะมีขนาดเท่ากันขนาดตัวอักษรพื้นฐานคือ 16px ดังนั้น 20em = 320px

อย่างไรก็ตามเมื่อฉันเปลี่ยนขนาดแบบอักษรของเบราว์เซอร์เป็นใหญ่มากเราจะเห็นว่า div ที่วัดเป็น EMS นั้นมีขนาดเพิ่มขึ้น

อย่างไรก็ตามเอฟเฟกต์นี้จะถูกลบหากฉันกำหนดขนาดตัวอักษรในแท็ก body เช่น

body {
  font-size: 16px;
}

เพราะตอนนี้ css ของฉันกำลังเอาชนะขนาดตัวอักษรที่เบราว์เซอร์กำหนด

ฉันได้รับ ems นั้นจะมีความสำคัญในวันที่เบราว์เซอร์รุ่นเก่าที่ซูมบนหน้าเว็บจะขยายแบบอักษรเท่านั้น แต่ทุกวันนี้เบราว์เซอร์สมัยใหม่ขยายขนาดทั้งพิกเซลและแบบอักษรทำให้การแสดงผลเป็นปัญหาการซูม

มองไปรอบ ๆ ในเว็บ - เว็บไซต์จำนวนมากที่ทำขนาดตัวอักษรชุดในแท็กร่างกายของพวกเขา

Stack Overflow ยกตัวอย่างเช่นตั้ง font-size เป็น 13px ในแท็ก body การตั้งค่าขนาดตัวอักษรในเบราว์เซอร์ของฉันไม่ส่งผลกระทบต่อเค้าโครงของ Stack Overflow เพียงเล็กน้อย

ผลการค้นหาของ Google ไม่ได้ทำเช่นนี้

(ภาพหน้าจอทั้งสองนี้ถ่ายโดยกำหนดขนาดตัวอักษรของ Chrome ที่ใหญ่มากและซูม 100%)

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

อย่างไรก็ตามเอฟเฟกต์นี้จะถูกลบหากฉันกำหนดขนาดตัวอักษรในแท็ก body เช่น

body {
  font-size: 16px;
}

เพราะตอนนี้ css ของฉันกำลังเอาชนะขนาดตัวอักษรที่เบราว์เซอร์กำหนด

คุณจะลืมเกี่ยวกับการเข้าถึง

ดูC14: การใช้หน่วย em สำหรับขนาดแบบอักษรจากหลักเกณฑ์การเข้าถึงเนื้อหาเว็บ (WCAG 2.0)

ตั้งค่าตัวเลือกขนาดตัวอักษรของเบราว์เซอร์ของคุณเพื่อมีขนาดใหญ่มาก ตอนนี้ไปที่เว็บไซต์เช่นW3C ข้อความมีลักษณะอย่างไร

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

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

นอกจากนี้โปรดทราบว่าหากคุณไม่ได้ระบุขนาดตัวอักษรเป็นพิกเซลที่ระดับร่างกายให้ติดemอย่างน้อยสำหรับขนาดตัวอักษรทุกที่ ตัวอย่างเช่น Google ระบุขนาดตัวอักษรที่ไม่สอดคล้องกันและหน้าการค้นหาของพวกเขาดูแปลกโดยเฉพาะอย่างยิ่งกับชื่อที่ปรากฏมีขนาดเล็กกว่าข้อความธรรมดา ในทางกลับกัน Wikipedia ทำงานได้อย่างยอดเยี่ยมโดยใช้emทุกครั้งที่มีการระบุขนาดตัวอักษร ด้านล่างนี้เป็นภาพหน้าจอของทั้งสองไซต์ที่แสดงโดย Chromium พร้อมตัวเลือกขนาดตัวอักษรเป็นขนาดใหญ่มาก :

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

นี่เป็นปัญหาที่แท้จริงด้วยเหตุผลสองประการ

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

ประการที่สองเว็บไซต์จำนวนมากเกินไปจะทำงานได้ไม่ดีเมื่อซูมเช่นกัน เว็บไซต์ที่ตอบสนองทำได้ดี แต่เว็บไซต์ที่ไม่ตอบสนองจะแสดงการเลื่อนแนวนอนหรือพฤติกรรม“ หน้าจอของคุณเล็กเกินไป”

นอกจากนี้ยังมีความแตกต่างพื้นฐานระหว่างการซูมและระดับข้อความสำหรับนักพัฒนา ในขณะที่emหมายถึง“ ปรับขนาดตามความต้องการของผู้ใช้” การซูมนั้นเกี่ยวกับการปรับขนาดทั้งหน้าขึ้นหรือลงไม่ใช่แค่ข้อความ

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

จุดของ ems คือการกำหนดการวัดทั้งหมดในหน้าเว็บของคุณตามขนาดตัวอักษรพื้นฐาน

นี่อาจเป็นความเข้าใจผิดของคำศัพท์ในส่วนของฉัน แต่เพื่อชี้แจง: emสัมพันธ์กับขนาดตัวอักษร "องค์ประกอบปัจจุบัน"remสัมพันธ์กับขนาดตัวอักษรรูต

ฉันได้รับ ems นั้นจะมีความสำคัญในวันที่เบราว์เซอร์รุ่นเก่าที่ซูมบนหน้าเว็บจะขยายแบบอักษรเท่านั้น

นั่นไม่ใช่เหตุผลที่ฉันใช้ em 's ในความเป็นจริงประสบการณ์การซูมของคุณเป็นสิ่งสุดท้ายในใจเมื่อใช้หน่วยวัด ความกังวลของฉันคือสองเท่า

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

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