ฉันควรใช้ px หรือหน่วยค่า rem ใน CSS ของฉันหรือไม่ [ปิด]

375

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

คำถามของฉันคือ: ฉันควรใช้pxหรือremใน CSS ของฉัน?

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

ฉันถามสิ่งนี้เพราะมีความคิดเห็นที่แตกต่างกันมากมายเกี่ยวกับระยะทางที่เหมาะสมที่สุดใน CSS และฉันไม่แน่ใจว่าสิ่งใดดีที่สุด

html  css  distance  units-of-measurement 
— TylerH
แหล่งที่มา
4
นี่เป็นเรื่องของการโต้แย้งและการโต้แย้งและความคิดเห็นไม่ใช่คำถามทางเทคนิคที่ SO นั้นดี อย่างไรก็ตามคำตอบที่ถูกต้องคือ“ ไม่” ☺
— Jukka K. Korpela
1
แม้แต่ความคิดเห็นที่ล้าสมัย เพียงเพราะ OP ขอความเห็นที่ถูกต้องไม่ได้หมายความว่าเราจะให้ความเห็นของเราเท่านั้น เกือบ 8 ปีต่อมาคำถามนี้แสดงให้เห็นว่ายังคงมีความตั้งใจแน่วแน่ในเรื่องที่วิวัฒนาการจะเป็นอย่างไร คำตอบในปัจจุบันมีการพิสูจน์และทางเทคนิคเพียงพอและไม่มีความเห็น ดังนั้นฉันขอแนะนำให้แก้ไขคำว่า "ความเห็น" เป็น "ประสบการณ์" ดังนั้นเราจะไม่ตกหลุมกับการเปิดและปิดคำถามนี้ซ้ำแล้วซ้ำอีก
— Tim Vermaelen
2
@TimVermaelen คำถามนี้ถูกปิดเพียงครั้งเดียวในชีวิต การเปลี่ยนแปลงที่เกิดขึ้นไม่ใช่สิ่งสำคัญเนื่องจากคำตอบนั้นยังขึ้นอยู่กับบริบทที่ไม่สามารถให้บริการได้เว้นแต่ OP จะแก้ไขคำถามเพื่อถามเกี่ยวกับสถานการณ์เฉพาะ ไม่มีตัวเลือก "ดีที่สุด" สำหรับทุกกรณีดังนั้นคำถามนี้เป็นไปตามความคิดเห็น
— TylerH

คำตอบ:

418

TL; DR:pxการใช้งาน

ข้อเท็จจริง

  • ครั้งแรกมันเป็นสิ่งสำคัญอย่างยิ่งที่ต้องรู้ว่าตามข้อกำหนด CSS pxหน่วยไม่เท่ากับหนึ่งพิกเซลที่แสดงจริง นี้ได้เสมอรับจริง - แม้ในปี 1996 CSS 1 ข้อมูลจำเพาะ

    CSS กำหนดพิกเซลอ้างอิงซึ่งวัดขนาดของพิกเซลบนหน้าจอ 96 dpi บนหน้าจอที่มี dpi แตกต่างกันอย่างมากมากกว่า 96dpi (เช่นจอแสดงผล Retina) ตัวแทนผู้ใช้จะลดpxขนาดหน่วยเพื่อให้ตรงกับขนาดของพิกเซลอ้างอิง กล่าวอีกนัยหนึ่งการลดขนาดนี้คือสาเหตุที่ 1 พิกเซล CSS เท่ากับพิกเซลแสดงผลทางกายภาพ 2 พิกเซล

    ที่กล่าวถึงจนถึงปี 2010 (และสถานการณ์การซูมมือถือแม้จะมี), pxเกือบจะเสมอหนึ่งพิกเซลทางกายภาพเพราะการแสดงผลที่มีอยู่อย่างกว้างขวางทั้งหมดอยู่ที่ประมาณ 96dpi

  • ขนาดที่ระบุไว้ในems เป็นญาติเพื่อองค์ประกอบหลัก สิ่งนี้นำไปสู่em"ปัญหาการรวม" ซึ่งองค์ประกอบที่ซ้อนกันจะใหญ่ขึ้นหรือเล็กลงเรื่อย ๆ ตัวอย่างเช่น:

    body { font-size:20px; } 
div { font-size:0.5em; }

    ให้เรา:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • CSS3 remซึ่งสัมพันธ์กับhtmlองค์ประกอบของรูทเสมอนั้นรองรับ96% ของเบราว์เซอร์ทั้งหมดที่ใช้งานอยู่

ความคิดเห็น

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

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

เบราว์เซอร์สมัยใหม่ (และแม้แต่ IE7 ที่ไม่ทันสมัย) ก็เปลี่ยนวิธีการปรับขนาดเริ่มต้นเพื่อเพียงซูมเข้าทุกสิ่งรวมถึงรูปภาพและขนาดกล่อง โดยพื้นฐานแล้วพวกมันทำให้พิกเซลอ้างอิงใหญ่ขึ้นหรือเล็กลง

ใช่คนที่ยังคงสามารถเปลี่ยนแปลงสไตล์ชีตเริ่มต้นเบราว์เซอร์ที่จะปรับแต่งขนาดตัวอักษรเริ่มต้น (เทียบเท่าแบบเก่าตัวเลือกขนาดตัวอักษร) แต่ที่เป็นวิธีที่ลึกลับมากจะเกี่ยวกับมันและฉันเดิมพันไม่มีใคร1ไม่ได้ (ใน Chrome มันถูกฝังอยู่ภายใต้การตั้งค่าขั้นสูงเนื้อหาเว็บขนาดตัวอักษรใน IE9 มันถูกซ่อนไว้มากกว่าเดิมคุณต้องกด Alt แล้วไปที่มุมมองขนาดตัวอักษร) มันง่ายกว่ามากที่จะเลือกตัวเลือกซูมใน เมนูหลักของเบราว์เซอร์ (หรือใช้Ctrl+ +/ -/ ล้อเมาส์)

1 - ภายในข้อผิดพลาดทางสถิติตามธรรมชาติ

หากเราสมมติว่าผู้ใช้ส่วนใหญ่ปรับสเกลหน้าโดยใช้ตัวเลือกการซูมฉันพบว่าหน่วยที่เกี่ยวข้องส่วนใหญ่ไม่เกี่ยวข้อง มันง่ายกว่ามากในการพัฒนาหน้าของคุณเมื่อทุกอย่างถูกระบุในหน่วยเดียวกัน (รูปภาพทั้งหมดมีการจัดการในหน่วยพิกเซล) และคุณไม่ต้องกังวลเกี่ยวกับการประนอม ( "ฉันบอกว่าจะไม่มีคณิตศาสตร์" - มีการจัดการกับการคำนวณสิ่งที่ 1.5em ใช้งานได้จริง)

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

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

— josh3736
แหล่งที่มา
43
คุณควรใช้พิกเซลและ rem เบราว์เซอร์ที่ใหม่กว่าจะได้รับ rem และเบราว์เซอร์เก่าจะกลับไปเป็นพิกเซล (เช่น WordPress 2012 ทำ) สิ่งนี้สามารถถูกทำให้เป็นอัตโนมัติด้วย Sass หรือ Less ดังนั้นสิ่งที่คุณต้องทำก็คือป้อนค่า px และมันจะส่งออก px และ rem โดยอัตโนมัติ
— cchiera
63
การพูดคลุมเครือครั้งใหญ่ของฉันกับอาร์กิวเมนต์นี้คือเมื่อปรับขนาดตัวอักษรและระยะห่างที่จุดพักที่ตอบสนองคุณสามารถกำหนดขนาดตัวอักษรใหม่ในองค์ประกอบ html และการวัดที่คุณตั้งไว้ใน rem จะปรับโดยอัตโนมัติในขณะที่ px คุณจะต้องเขียน กฎใหม่สำหรับการวัดทุกครั้งที่คุณต้องการปรับแต่ง แน่นอนว่าอาจต้องมีการปรับเพิ่มมากขึ้นแม้ว่าจะใช้ rem แต่ด้วยการวางแผนที่ชาญฉลาดคุณจะได้รับสัดส่วนจำนวนมากฟรี การวัดระยะห่างของกล่องเพื่อพิมพ์รหัสที่เบาลงและความซับซ้อนน้อยลง / ความสามารถในการบำรุงรักษามากขึ้นเท่ากับชัยชนะที่ชัดเจนสำหรับฉัน
— RobW
16
สมมติว่าไม่มีผู้ใช้เปลี่ยนการตั้งค่าขนาดตัวอักษรค่อนข้างหนา การเรียกร้องดังกล่าวควรสำรองไว้กับข้อมูล มิฉะนั้นจะเป็นเพียงวิธีที่ทำให้ผู้ใช้บางรายที่มีความเปราะบางอยู่แล้ว (ppl บกพร่องทางสายตา) หากทำได้ให้ใช้ rem แทน px IMO แอปควรสามารถปรับขนาดส่วนต่อประสานและแบบอักษรได้อย่างอิสระ "เพียงแค่ใช้ px" คือสิ่งที่ผู้พัฒนาซอฟต์แวร์จำนวนมากที่ประสบปัญหาการส่ง ems ต้องการได้ยิน แต่มันไม่ใช่คำตอบที่ถูกต้องสำหรับเว็บ
— Olivvv
18
คงจะดีถ้าได้ติดตามเรื่องนี้ ตอนนี้ Rem รองรับได้ 95% +
— สถิติการเรียนรู้ตามตัวอย่าง
10
ผิดฉันไม่สนใจ IE (ไม่มีใครควร)
— Vahid Amiri
193

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

tl; dr:ใช้rem

ภาพรวมหน่วย

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

remหน่วยแสดงขนาดr oot em มันเป็นสิ่งที่ตรงกับfont-size :rootในกรณีของ HTML มันเป็น<html>องค์ประกอบ สำหรับ SVG เป็น<svg>องค์ประกอบ เริ่มต้นfont-sizeในเบราว์เซอร์ทุก * 16pxคือ

ในขณะที่เขียนที่remได้รับการสนับสนุนโดยประมาณ 98% ของผู้ใช้ หากคุณกำลังกังวลเกี่ยวกับที่อื่น ๆ 2% ผมจะเตือนคุณว่าคำสั่งสื่อจะยังได้รับการสนับสนุนโดยประมาณ 98% ของผู้ใช้

เกี่ยวกับการใช้ px

ตัวอย่าง CSS ส่วนใหญ่บนอินเทอร์เน็ตใช้pxค่าเพราะเป็นมาตรฐานจริง pt, inและความหลากหลายของหน่วยงานอื่น ๆจะถูกนำมาใช้ในทางทฤษฎี แต่พวกเขาไม่ได้จัดการกับค่าเล็ก ๆ เดียวกับคุณได้อย่างรวดเร็วจะต้องรีสอร์ทเพื่อเศษส่วนซึ่งเป็นอีกต่อไปที่ชนิดและยากที่จะเหตุผลเกี่ยวกับ

หากคุณต้องการเส้นขอบแบบบางpxคุณสามารถใช้1pxโดยptคุณต้องใช้0.75ptเพื่อผลลัพธ์ที่สอดคล้องกันและนั่นก็ไม่สะดวก

เกี่ยวกับการใช้ rem

remค่าเริ่มต้นของ16pxไม่ใช่ข้อโต้แย้งที่แข็งแกร่งมากสำหรับการใช้งาน เขียน0.0625remเป็นที่เลวร้ายยิ่งกว่าการเขียน0.75ptดังนั้นทำไมจะใช้ใครrem?

มีประโยชน์สองส่วนremเหนือหน่วยอื่น ๆ

  • ความพึงพอใจของผู้ใช้เป็นที่เคารพนับถือ
  • คุณสามารถเปลี่ยนpxค่าที่ชัดเจนของremสิ่งที่คุณต้องการ

เคารพการตั้งค่าของผู้ใช้

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

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

หากคุณยึดการสืบค้นสื่อของremคุณเป็นหลักคุณสามารถตรวจสอบให้แน่ใจว่าเว็บไซต์ที่ผู้ใช้เห็นเหมาะกับหน้าจอ ผู้ใช้ที่มีfont-sizeชุด32pxบน640pxเบราว์เซอร์กว้างได้อย่างมีประสิทธิภาพจะเห็นเว็บไซต์ของคุณเป็นแสดงให้เห็นว่าผู้ใช้ที่16pxอยู่บน320pxเบราว์เซอร์กว้าง อย่างมีการสูญเสีย RWD remในการใช้ไม่ได้

การเปลี่ยนpxค่าที่ชัดเจน

เพราะremอยู่บนพื้นฐานfont-sizeของ:rootโหนดถ้าคุณต้องการที่จะเปลี่ยนสิ่งที่1remแสดงให้เห็นถึงสิ่งที่คุณต้องทำคือการเปลี่ยนfont-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
ขยายตัวอย่างข้อมูล

ไม่ว่าคุณจะทำอะไรอย่าตั้งค่า:rootองค์ประกอบfont-sizeเป็นpxค่า

ถ้าคุณตั้งค่าfont-sizeบนhtmlกับpxค่าที่คุณได้ปลิวไปตั้งค่าของผู้ใช้โดยไม่ต้องวิธีที่จะได้รับพวกเขากลับมา

หากคุณต้องการเปลี่ยนค่าที่ชัดเจนของremให้ใช้%หน่วย

คณิตศาสตร์สำหรับเรื่องนี้ค่อนข้างตรงไปตรงมา

ชัดเจน font-size ของ:rootเป็นแต่ให้บอกว่าเราต้องการที่จะเปลี่ยนไป16px 20pxทั้งหมดที่เราต้องทำคือการคูณด้วยค่าที่จะได้รับ1620

ตั้งค่าสมการของคุณ:

16 * X = 20

และแก้ปัญหาสำหรับX:

X = 20 / 16
X = 1.25
X = 125%

:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
ขยายตัวอย่างข้อมูล

การทำทุกอย่างเป็นทวีคูณ20ไม่ใช่สิ่งที่ยอดเยี่ยม แต่คำแนะนำทั่วไปก็คือทำให้ขนาดremเท่ากัน10pxชัดเจน จำนวนมายากลที่10/16ซึ่งเป็นหรือ0.62562.5%

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
ขยายตัวอย่างข้อมูล

ปัญหาที่เกิดขึ้นในขณะนี้คือการที่เริ่มต้นของคุณfont-sizeสำหรับส่วนที่เหลือของหน้าเป็นวิธีชุดเล็กเกินไป แต่มีการแก้ไขที่ง่ายสำหรับการที่: ตั้งค่าfont-sizeในbodyการใช้rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>
ขยายตัวอย่างข้อมูล

สิ่งสำคัญที่ควรทราบคือเมื่อมีการปรับค่านี้ค่าที่ชัดเจนremคือ10pxซึ่งหมายความว่าค่าใด ๆ ที่คุณอาจเขียนpxสามารถแปลงได้โดยตรงremโดยการชนทศนิยม

padding: 20px;

กลายเป็น

padding: 2rem;

ขนาดตัวอักษรที่ชัดเจนที่คุณเลือกนั้นขึ้นอยู่กับคุณดังนั้นหากคุณต้องการไม่มีเหตุผลคุณไม่สามารถใช้:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

และมีความเท่าเทียมกัน1rem1px

ดังนั้นคุณมีมันเป็นทางออกที่ง่ายในการเคารพความต้องการของผู้ใช้ในขณะที่ยังหลีกเลี่ยงความซับซ้อนของ CSS

เดี๋ยวก่อนแล้วอะไรที่จับได้?

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

Media Queries (ใช้em)

หนึ่งในปัญหาแรกที่คุณจะพบโดยremเกี่ยวข้องกับการสืบค้นสื่อ พิจารณารหัสต่อไปนี้:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

ค่าของremการเปลี่ยนแปลงขึ้นอยู่กับว่าการสืบค้นสื่อใช้หรือไม่และการสืบค้นสื่อขึ้นอยู่กับมูลค่าของremสิ่งที่เกิดขึ้นบนโลก

remในคำสั่งสื่อใช้ค่าเริ่มต้นของfont-sizeและไม่ควร (ดูส่วน Safari) คำนึงถึงการเปลี่ยนแปลงใด ๆ ที่อาจเกิดขึ้นกับfont-sizeของ:rootองค์ประกอบ ในคำอื่น ๆ ก็คุ้มค่าที่เห็นได้ชัดคือเสมอ 16px

นี้เป็นบิตที่น่ารำคาญเพราะมันหมายความว่าคุณต้องทำบางคำนวณเศษส่วน แต่ฉันได้พบว่าที่พบมากที่สุดคำสั่งสื่อแล้วใช้ค่าที่มีหลายรายการที่ 16

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

นอกจากนี้หากคุณใช้ตัวประมวลผลล่วงหน้า CSS คุณสามารถใช้มิกซ์อินหรือตัวแปรเพื่อจัดการคิวรีสื่อบันทึกของคุณซึ่งจะปกปิดปัญหาทั้งหมด

การแข่งรถวิบาก

น่าเสียดายที่มีข้อผิดพลาดที่รู้จักกับ Safari ซึ่งการเปลี่ยนแปลง:rootขนาดตัวอักษรจะเปลี่ยนremค่าที่คำนวณได้สำหรับช่วงแบบสอบถามสื่อ สิ่งนี้อาจทำให้เกิดพฤติกรรมที่แปลกประหลาดบางอย่างถ้าขนาดตัวอักษรของ:rootองค์ประกอบเปลี่ยนไปในเคียวรีสื่อบันทึก โชคดีที่การแก้ไขง่ายๆคือ: การใช้emหน่วยคำสั่งสื่อ

การสลับบริบท

หากคุณสลับระหว่างโครงการต่าง ๆ โครงการต่าง ๆ เป็นไปได้ค่อนข้างที่ขนาดตัวอักษรที่ชัดเจนremจะมีค่าแตกต่างกัน ในโครงการหนึ่งคุณอาจจะใช้ขนาดที่ชัดเจนของที่อยู่ในโครงการอื่นที่มีขนาดที่ชัดเจนอาจจะมี10px 1pxสิ่งนี้อาจสร้างความสับสนและทำให้เกิดปัญหา

คำแนะนำเดียวของฉันที่นี่คือการยึดติดกับ62.5%การแปลงremเป็นขนาดที่ชัดเจน10pxเพราะนั่นเป็นเรื่องธรรมดาในประสบการณ์ของฉัน

ไลบรารี CSS ที่ใช้ร่วมกัน

หากคุณกำลังเขียน CSS ที่จะถูกใช้บนไซต์ที่คุณไม่ได้ควบคุมเช่นสำหรับวิดเจ็ตที่ฝังอยู่จะไม่มีวิธีที่ดีที่จะทราบว่าขนาดที่ชัดเจนremจะมีอะไร หากเป็นกรณีนี้โปรดใช้pxต่อไป

หากคุณยังคงต้องการที่จะใช้remแต่พิจารณาปล่อย Sass remหรือน้อยกว่ารุ่นของสไตล์กับตัวแปรที่จะแทนที่การปรับสำหรับขนาดที่ชัดเจนของ

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

— zzzzBov
แหล่งที่มา
ฉันรู้ว่ามันสาย แต่ฉันชอบวิธีการใช้ REM แต่ฉันมีปัญหามากที่สุดในการใช้ rem คือเมื่อฉันใช้matrix()กับจาวาสคริปต์ซึ่งเป็นเมทริกซ์แปลค่ากำลังใช้งานอยู่ px(ถูกต้องฉันถ้าฉันผิด) และฉันสับสนมาก .
— Ampersanda
3
@Ampersanda ใน JavaScript คุณส่วนใหญ่จะใช้ค่าพิกเซลที่คำนวณ คำแนะนำของฉันคือการสลับชั้นเรียนที่เป็นไปได้เพื่อให้ CSS สามารถจัดการว่าสิ่งที่ดู สำหรับบางสิ่งคุณจะไม่สามารถหลีกเลี่ยงการใช้ JS เพื่อคำนวณค่าพิกเซลดังนั้นทางออกที่ดีที่สุดของคุณคือการคำนวณค่าพิกเซลจากสถานะ DOM
— zzzzBov
ฉันเห็นดังนั้นฉันต้องทำgetComputedStyle()แต่ผลลัพธ์อยู่เสมอพิกเซลดังนั้นฉันต้องหารผลลัพธ์ด้วยremค่า (เช่น 16) CMIIW
— เครื่องหมายแอมแซน
@Ampersanda เฉพาะในกรณีที่คุณสร้างremมูลค่าหากคุณมีpxค่าที่ถูกต้องแล้วคุณไม่จำเป็นต้องเปลี่ยนเป็นremหน่วยสำหรับสิ่งต่าง ๆ ที่คำนวณไว้แล้วสำหรับบริบทที่กำหนด
— zzzzBov
1
มี 1rem เท่ากับ 1pxซึ่งทำให้เกิดปัญหาเนื่องจากขนาดแบบอักษรขั้นต่ำของ Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/ …
— Paul
44

บทความนี้จะอธิบายสวยดีข้อดีและข้อเสียของpx, และemrem

ในที่สุดผู้เขียนก็สรุปว่าวิธีที่ดีที่สุดน่าจะใช้ทั้งคู่pxและremประกาศpxเป็นครั้งแรกสำหรับเบราว์เซอร์รุ่นเก่าและ redeclaring remสำหรับเบราว์เซอร์รุ่นใหม่:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
— Uzyn
แหล่งที่มา
1
ใช่มันเป็นสิ่งที่ทำให้ฉันสนใจในเรื่อง rem ในตอนแรก สองสิ่งที่ฉันไม่เข้าใจ: เขาแนะนำให้มันเป็นหน่วยของการวัดแบบอักษร (ไม่ใช่องค์ประกอบ) และถ้าฉันเข้าใจเขาอย่างถูกต้องเหตุผลที่แท้จริงที่จะใช้ (r) em คือเหตุผลที่ผู้ใช้ IE สามารถปรับขนาดข้อความได้หรือไม่
1
@ ซามูเอลฉันเชื่ออย่างนั้น pxถ้าไม่ได้สำหรับการปรับขนาดข้อความที่ผมเชื่อว่าเราต้องการที่จะใช้ สำหรับยูนิตสำหรับองค์ประกอบการเกาะติดpxจะดีกว่าตามปกติคุณจะต้องการปรับขนาดองค์ประกอบอย่างแม่นยำ
— uzyn
แต่ถ้าคุณทำเช่นนั้นการตั้งค่าเบราว์เซอร์ใด ๆ ที่กำหนดขนาดแบบอักษรพื้นฐานใหม่จะทำให้เค้าโครงของคุณถูกต้องหรือไม่ ทำไมไม่ rem สำหรับทุกสิ่ง?
1
มีความคิดเห็นมากมายที่นี่เหตุผลที่เราต้องทิ้งpxคือการปรับขนาด ตอนนี้ถ้าเราใช้remเรายังคงต้องให้ทางpxเลือก (ในเบราว์เซอร์รุ่นเก่า) หลักสิ่งที่ว่าก็คือการปรับขนาดการสนับสนุนที่ดีกว่าpx remเบราว์เซอร์ที่ใหม่กว่ารองรับการpxปรับขนาดและสำหรับเบราว์เซอร์รุ่นเก่าในลักษณะที่เราจะเลือกpxใช้ ตอนนี้จากข้อสรุปนี้ฉันสนใจมากที่จะรู้ว่าทำไมต้องใช้rem? ถ้าฉันเห็นแสงที่ปลายอุโมงค์
— ฟิวชั่น
3
ไม่รับประกันว่าค่าเช่น 62.5% = 10px มันคงจริงเมื่อขนาดแบบอักษรเริ่มต้นของเบราว์เซอร์ถูกตั้งค่าเป็น 16px แม้ว่านี่จะเป็นค่าเริ่มต้น แต่ก็ไม่รับประกัน
— cimmanon
7

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

แต่การรองรับ rem นั้นขาด ๆ หาย ๆ IE8 ต้องการ polyfill และ Webkit กำลังแสดงข้อผิดพลาด ยิ่งกว่านั้นการคำนวณพิกเซลย่อยอาจทำให้บางสิ่งบางอย่างเช่นบางพิกเซลหายไป วิธีแก้ไขคือการใช้รหัสเป็นพิกเซลสำหรับองค์ประกอบที่มีขนาดเล็กมาก ที่แนะนำความซับซ้อนมากยิ่งขึ้น

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

สำหรับบางกรณีมันเป็นใช่สำหรับบางกรณีมันจะไม่ใช่

ดังนั้นขึ้นอยู่กับความต้องการของคุณและคุณต้องคำนึงถึงข้อดีและข้อเสียเนื่องจากการใช้ rem และ em แนะนำสิ่งที่ต้องพิจารณาเพิ่มเติมเมื่อเปรียบเทียบกับเวิร์กโฟลว์ที่ใช้พิกเซล "ปกติ"

โปรดจำไว้ว่ามันง่ายที่จะเปลี่ยน (หรือแปลง) CSS ของคุณจาก px เป็น rem (JavaScript เป็นอีกเรื่องหนึ่ง) เพราะบล็อก CSS สองบล็อกต่อไปนี้จะให้ผลลัพธ์ที่เหมือนกัน:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
— Rolf
แหล่งที่มา
6

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

ในข้อความด้านซ้าย gif ด้านล่างถูกตั้งค่าโดยใช้ขนาดตัวอักษร REM หน่วยในขณะที่แบบอักษรด้านขวาถูกตั้งค่าโดยหน่วย PX

ป้อนคำอธิบายรูปภาพที่นี่

อย่างที่คุณเห็นว่า REM นั้นมีการปรับขึ้น / ลงโดยอัตโนมัติเมื่อฉันปรับขนาดแบบอักษรเริ่มต้นของหน้าเว็บ (ด้านล่างขวา)

ขนาดตัวอักษรเริ่มต้นของหน้าเว็บคือ 16px ซึ่งเท่ากับ 1 rem (สำหรับหน้า html เริ่มต้นเท่านั้นhtml{font-size:100%}) ดังนั้น 1.25rem จะเท่ากับ 20px

PS: ใครบ้างที่ใช้ REM? CSS Frameworks! เช่น Bootstrap 4, Bulma CSS เป็นต้นดังนั้นควรเข้ากันได้ดีกว่า

— JerryGoyal
แหล่งที่มา
3

คำตอบของ josh3736 เป็นคำตอบที่ดี แต่เพื่อให้ได้ข้อแตกต่าง 3 ปีต่อมา:

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

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

Caniuse.com อาจจะกล่าวว่ามีเพียง 75% ของเบราว์เซอร์เมื่อ josh3736 โพสต์คำตอบของเขาในปี 2012 แต่ณ วันที่ 27 มีนาคมพวกเขาเรียกร้องการสนับสนุน IE8 เท่านั้นที่ไม่รองรับเบราว์เซอร์ที่ติดตาม

— Joshua Carmody
แหล่งที่มา
1
Only IE8 doesn't support it among the browsers they track.ฮะ? หน้าที่เชื่อมโยงนั้นระบุว่า“ IE9 & IE10 ไม่รองรับหน่วยความจำเมื่อใช้ในคุณสมบัติแบบอักษรแบบย่อหรือเมื่อใช้กับองค์ประกอบแบบหลอก IE9, 10 & 11 ไม่สนับสนุนหน่วยความจำเมื่อใช้ในคุณสมบัติความสูงบรรทัดเมื่อใช้กับ: ก่อนและ: หลังองค์ประกอบหลอก ขนาดของขอบใน rem จะหายไปเมื่อซูมออกหน้าเว็บใน Chrome ไม่ทำงานบนเบราว์เซอร์ Samsung Note II Android 4.3 และ Samsung Galaxy Tab 2 บน Android 4.2 Chrome 31-34 & Android ที่ใช้ Chrome (เช่น 4.4) มีข้อบกพร่องขนาดตัวอักษรเกิดขึ้นเมื่อองค์ประกอบรูทมีขนาดเป็นเปอร์เซ็นต์”
— e-sushi
นอกจากนี้ที่เกี่ยวข้องกับของคุณas of March 27 they claim 93.78% support.ในขณะที่เขียนความคิดเห็นนี้caniuseแสดงเพียง 91.79% การสนับสนุนเบราว์เซอร์เต็มรูปแบบ เมื่อดูที่เปอร์เซ็นต์ของคุณฉันค่อนข้างแน่ใจว่าคุณได้รวมการสนับสนุนเบราว์เซอร์buggy แล้วด้วย (ปัจจุบันที่ 2.8% ซึ่งอาจตีความได้ว่าเป็นความครอบคลุมโดยรวมในแง่ดี 94.6% - แต่ความจริงก็คือ 2.8% นั้นมาพร้อมกับ buggy การสนับสนุนล้มเหลว…ตามที่ระบุไว้ในความคิดเห็นก่อนหน้าของฉัน: ข้อผิดพลาดแต่ละอย่างเป็นผลมาจากการรวมกันของรุ่นเบราว์เซอร์และระบบปฏิบัติการที่แตกต่างกัน) คุณอาจต้องการแก้ไขคำตอบของคุณตามนั้น ...
— e-sushi
1

ฉันได้พบวิธีที่ดีที่สุดในการโปรแกรมขนาดตัวอักษรของเว็บไซต์คือการกำหนดขนาดตัวอักษรพื้นฐานสำหรับbodyและจากนั้นใช้ em's (หรือ rem's) สำหรับทุก ๆ ที่font-sizeฉันประกาศหลังจากนั้น ฉันคิดว่ามันเป็นความชอบส่วนตัว แต่มันให้บริการฉันดีและทำให้มันง่ายมากที่จะรวมการออกแบบที่ตอบสนองได้ดีขึ้น

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

— cereallarceny
แหล่งที่มา
ตกลง. แต่การออกแบบที่ตอบสนองนั้นทำได้อย่างง่ายดายเพียงแค่ใช้หน่วย px ที่ถูกต้อง (เพียงเขียนคำสั่งสื่อของคุณตาม px แทนที่จะเป็น em)?
อย่างไรก็ตามคุณสามารถทำได้ถ้าคุณต้องการทำให้ขนาดตัวอักษรเล็กลงเนื่องจากความกว้างของวิวพอร์ตของเว็บไซต์ของคุณเล็กลงคุณสามารถเปลี่ยนbodyขนาดตัวอักษรและทุกอย่างเปลี่ยนไป
— cereallarceny
ฉันไม่ได้กังวลเกี่ยวกับการสนับสนุนเบราว์เซอร์ ฉันจะรวมขนาด px สำรองสำหรับทุกขนาดเพื่อให้เบราว์เซอร์รุ่นเก่ามีสิ่งที่ต้องตีความ
จากนั้นไปเพื่อความก้าวหน้าโดยใช้ rem's ตราบใดที่คุณให้ทางเลือกฉันก็ไม่เห็นอันตรายใด ๆ สำหรับฉันดูเหมือนว่าจะเป็นงานพิเศษ แต่อาจไม่ได้อยู่ในสถานการณ์ของคุณ
— cereallarceny
0

ptคล้ายกับremที่ค่อนข้างคงที่ แต่แทบทุก DPI จะไม่ขึ้นต่อกันแม้ว่าเบราว์เซอร์ที่ไม่ได้มาตรฐานจะปฏิบัติpxในลักษณะที่ขึ้นกับอุปกรณ์ remขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบราก แต่คุณสามารถใช้สิ่งที่ต้องการ Sass / ptเข็มทิศการทำเช่นนี้โดยอัตโนมัติด้วย

หากคุณมีสิ่งนี้:

html {
    font-size: 12pt;
}

แล้วจะเสมอ 1rem และเป็นอุปกรณ์ที่ไม่ขึ้นกับองค์ประกอบที่พึ่งพา เบราว์เซอร์บางตัวไม่ทำงานตามสเป็คและปฏิบัติอย่างแท้จริง แม้ในสมัยก่อนของเว็บ 1 จุดได้รับการยกย่องอย่างต่อเนื่องเป็น 1/72 นิ้ว - นั่นคือมี 72 คะแนนในหนึ่งนิ้ว12ptremempx

หากคุณมีเบราว์เซอร์ที่เก่าและไม่สอดคล้องและคุณมี:

html {
    font-size: 16px;
}

จากนั้น1remจะขึ้นอยู่กับอุปกรณ์ สำหรับองค์ประกอบที่จะสืบทอดจากhtmlค่าเริ่มต้น1emก็จะขึ้นอยู่กับอุปกรณ์ 12ptจะหวังว่าเทียบเท่าอุปกรณ์อิสระรับประกัน: ที่16px / 96px * 72pt = 12pt96px = 72pt = 1in

การทำคณิตศาสตร์นั้นค่อนข้างซับซ้อนหากคุณต้องการยึดติดกับหน่วยเฉพาะ ยกตัวอย่างเช่นและ.75em of html = .75rem = 9pt .66em of .75em of html = .5rem = 6ptกฎง่ายๆ

  • ใช้ptสำหรับขนาดที่แน่นอน หากคุณต้องการให้สิ่งนี้เป็นแบบไดนามิกที่สัมพันธ์กับองค์ประกอบรากคุณจะถาม CSS มากเกินไป คุณต้องการภาษาที่คอมไพล์กับ CSS เช่น Sass / SCSS
  • ใช้emสำหรับขนาดที่สัมพันธ์กัน มันค่อนข้างสะดวกที่จะพูดว่า "ฉันต้องการให้ระยะขอบด้านซ้ายเป็นความกว้างสูงสุดของตัวอักษร" หรือ "ทำให้ข้อความขององค์ประกอบนี้ใหญ่กว่าสภาพแวดล้อมเล็กน้อย" <h1>เป็นองค์ประกอบที่ดีที่จะใช้ขนาดตัวอักษรเป็น EMS เนื่องจากมันอาจปรากฏในที่ต่าง ๆ แต่ควรใหญ่กว่าตัวอักษรใกล้เคียง ด้วยวิธีนี้คุณไม่จำเป็นต้องมีขนาดแบบอักษรแยกต่างหากสำหรับทุกคลาสที่นำไปใช้h1: ขนาดแบบอักษรจะปรับโดยอัตโนมัติ
  • ใช้pxสำหรับขนาดที่เล็กมาก ขนาดที่เล็กมากptอาจเบลอในเบราว์เซอร์บางตัวที่ 96 DPI ตั้งแต่ptและpxไม่เข้าแถว หากคุณต้องการสร้างเส้นขอบบาง ๆ หนึ่งพิกเซลให้พูดเช่นนั้น หากคุณมีจอแสดงผล DPI สูงสิ่งนี้จะไม่ชัดเจนสำหรับคุณในระหว่างการทดสอบดังนั้นอย่าลืมทดสอบจอแสดงผล 96-DPI ทั่วไปในบางจุด
  • ไม่ต้องจัดการใน subpixels เพื่อทำให้สิ่งที่แฟนซีบนหน้าจอ DPI สูง เบราว์เซอร์บางตัวอาจรองรับมัน - โดยเฉพาะอย่างยิ่งบนหน้าจอที่มี DPI สูง - แต่มันไม่เป็นเช่นนั้น ผู้ใช้ส่วนใหญ่ต้องการขนาดใหญ่และชัดเจนแม้ว่าเว็บจะสอนเราเป็นอย่างอื่น หากคุณต้องการเพิ่มรายละเอียดเพิ่มเติมสำหรับผู้ใช้ของคุณด้วยหน้าจอที่ทันสมัยคุณสามารถใช้กราฟิกแบบเวกเตอร์ (อ่าน: SVG) ซึ่งคุณควรทำอยู่ดี
— Zenexer
แหล่งที่มา
1
พอยต์จะถูกพิมพ์สำหรับสื่อและไม่ควรนำมาใช้สำหรับหน้าจอ
— เอสเอฟ
@sf CSS กำหนด pt และ px เพื่อให้พวกเขามีอัตราส่วนเดียวกันเสมอแม้ว่าจะไม่ได้มีการใช้ที่ถูกต้องทางเทคนิคของคำเหล่านั้น (72pt = 96px = 1in) ในความเป็นจริงใน CSS px ไม่ใช่พิกเซลอุปกรณ์เดียว บนหน้าจอของฉัน 1px คือ 2 พิกเซลของอุปกรณ์ ข้อดีของการใช้ pt over px คือคุณสามารถระบุขนาดองค์ประกอบที่สัมพันธ์กับขนาดข้อความได้อย่างง่ายดาย
— Zenexer
-2

ครึ่งหนึ่ง (แต่เพียงครึ่งเดียว) คำตอบที่น่ารำคาญ (อีกครึ่งหนึ่งเป็นความรังเกียจที่ขมขื่นต่อความเป็นจริงของระบบราชการ):

ใช้ vh

ทุกอย่างมีขนาดเท่ากับหน้าต่างเบราว์เซอร์

อนุญาตให้เลื่อนลงเสมอไม่ไปด้านข้าง

ตั้งค่าความกว้างของร่างกายให้คงที่ 50vh และไม่มีอะไรลอยหรือแตกออกจาก div parent และสไตล์เพียงใช้ตารางเพื่อให้ทุกอย่างถูกจัดวางอย่างเข้มงวดตามที่คาดไว้ รวมฟังก์ชั่นจาวาสคริปต์เพื่อเลิกทำ ctrl +/- กิจกรรมที่ผู้ใช้อาจทำ

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

— liljoshu
แหล่งที่มา
-3

ใช่. หรือค่อนข้างจะไม่

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

UPDATE:

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

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

— DA
แหล่งที่มา
ดังนั้นคำตอบของคุณคือมันไม่สำคัญเหรอ? หรือมีสถานการณ์บางอย่างที่คุณจะให้ความสำคัญกับอีกคนหนึ่ง? และถ้าเป็นเช่นนั้นในกรณีใดสถานการณ์นี้จะเป็นอย่างไร
@Samuel ใช่อาจมีบางครั้งที่คุณต้องการใช้อย่างใดอย่างหนึ่ง ฉันได้อัปเดตคำตอบของฉันพร้อมข้อมูลเพิ่มเติมแล้ว
— ดา
ขออภัยฉันสับสนเล็กน้อยกับถ้อยคำต้นฉบับ มันคิดว่าคุณมี REM ในชื่อเรื่องและ EM ในร่างกาย ดูเหมือนว่าคุณกำลังถามเกี่ยวกับ REM เป็นพิเศษ คำตอบนั้นยังคงเหมือนเดิม แต่ REM มีประโยชน์เพิ่มเติมให้พิจารณาบ้าง แต่ส่วนใหญ่จะใช้เหมือนกับ EM - ช่วยให้คุณใช้ขนาดตัวอักษร 'base'
— ดา
ทำไม " em's [... ] ดีถ้าคุณสามารถเริ่มจากศูนย์และต้องการใช้ขนาดตัวอักษรพื้นฐานและทำให้ทุกอย่างสัมพันธ์กัน " ข้อได้เปรียบของ (r) em's over px คืออะไร มันเป็นเพื่อให้ผู้ใช้ IE สามารถปรับขนาดข้อความหรือมีข้อได้เปรียบอื่น ๆ กว่า px (ซึ่งดูเหมือนจะง่ายขึ้น)?
EM และ REM มีประโยชน์เหมือนกัน: คุณสามารถตั้งค่า HTML หรือ BODY ให้เป็นขนาดตัวอักษรที่ระบุ (พูด 10px) จากนั้นตั้งค่าอื่นเป็น EM หรือ REM ด้วยวิธีนี้หากคุณต้องการทำให้ประเภททั้งหมดมีขนาดใหญ่ขึ้นตามสัดส่วนคุณเพียงแค่เปลี่ยนรูปแบบ 10px เริ่มต้นหนึ่งรูปแบบเป็น 11px นี่เป็นวิธีที่มีประโยชน์มากขึ้นเมื่อ 5 ปีที่แล้วเมื่อเราสร้างเครื่องมือปรับขนาดแบบอักษร JS ของเราเอง ทุกวันนี้เบราว์เซอร์ทำงานได้ดีกว่าในการซูม (โดยเฉพาะอุปกรณ์พกพา) ที่ฉันพบว่ามีประโยชน์น้อยกว่ามาก หากคุณพบว่า PX ง่ายกว่านั่นเป็นประโยชน์สำหรับคุณและแน่นอนว่าเหตุผลที่ถูกต้องคือการใช้ PX
— ดา
-4

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

การวาง em อย่างง่ายเป็นสิ่งเดียวที่ปรับขนาดพร้อมกันด้วยปุ่ม alt + และ alt- ในเบราว์เซอร์เพื่อซูมภาพ

ขนาดการวัดอื่น ๆ แต่ไม่ได้อย่างสมบูรณ์เหมือนกับ em

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

— shawty
แหล่งที่มา
3
แต่ทุกวันนี้เบราว์เซอร์ส่วนใหญ่ซูมองค์ประกอบของหน้าเท่า ๆ กัน (เว้นแต่คุณจะปรับขนาดตัวอักษรพื้นฐาน) ดังนั้นประโยชน์ของการใช้ (r) em นั้นไม่เป็นความจริงสำหรับเบราว์เซอร์สมัยใหม่ใช่ไหม?
มันเป็นและไม่ใช่ในขณะที่คุณพูดถูกในสิ่งที่คุณพูดมันเป็นเรื่องเกี่ยวกับปัจจัยการปรับขนาดซึ่งต่างจากการปรับขนาดสามเหลี่ยมปากแม่น้ำ เดลต้าจะสม่ำเสมอโดยไม่คำนึงถึงการวัดที่ใช้ แต่ตัวประกอบสเกล (การคำนวณทางคณิตศาสตร์ให้ถูกต้อง) จะปรับตามที่จำเป็นสำหรับการพูดว่าจอภาพแบบไวด์สกรีนเทียบกับมอนิเตอร์มาตรฐานหรือสี่เหลี่ยมพิกเซลเทียบกับพิกเซลสี่เหลี่ยม เนื่องจาก rems จะขึ้นอยู่กับการวัดที่แท้จริงของเครื่องพิมพ์ดังนั้นการปรับขนาดจะเหมาะสมกว่าเสมอผู้อื่น (เช่น%) จึงมักเป็นเดลต้าออฟเซ็ตที่ดีที่สุด
— Shaw
(ต่อ) ด้วยการคูณที่ใช้ข้ามทั้งสองทิศทางและในบางกรณีอาจให้อัตราส่วนการดูที่ไม่เหมาะสมสัดส่วน
— Shawty
2
"การใส่เพียงแค่ em นั้นเป็นสิ่งเดียวที่ปรับขนาดพร้อมกันด้วยปุ่ม alt + และ alt- ในเบราว์เซอร์เพื่อซูม" = นั่นไม่ถูกต้อง
— ดา
ตกลงเพื่อที่ฉันจะได้พูดได้ดีขึ้นดูความคิดเห็นก่อนหน้าของฉันสำหรับการแก้ไข
— คลุมไหล่
-5

EM เป็นสิ่งเดียวที่ปรับขนาดสำหรับการสืบค้นสื่อที่จัดการกับ +/- การปรับสเกลซึ่งผู้คนทำตลอดเวลาไม่ใช่แค่คนตาบอด นี่เป็นอีกหนึ่งเขียนดีมากการสาธิตมืออาชีพที่ว่าทำไมเรื่องนี้

นี่คือเหตุผลว่าทำไมZurb Foundation จึงใช้ emsในขณะที่ Bootstrap 3 ที่ด้อยกว่ายังคงใช้พิกเซล

— robmuh
แหล่งที่มา
2
มันไม่ถูกต้องจริงๆ ในสมัยก่อนคุณไม่สามารถซูมพิกเซลใน IE เวอร์ชันเก่าได้ +/- ขณะนี้ทำการซูมแบบเต็มหน้าในเบราว์เซอร์ปัจจุบันทั้งหมดดังนั้นจึงไม่มีปัญหา นอกจากนี้คำถามนี้เกี่ยวกับ rems มากกว่า px - ไม่ใช่ em vs px
— Rich Bradshaw
1
พวกคุณทำให้ฉันหัวเราะ คุณเคยลองขยายไซต์ของคุณโดยใช้ +/- โดยใช้พิกเซลหรือไม่ การเพิ่มจำนวนพิกเซลที่ถูกซูมนั้นผิดพลาด ลงคะแนนให้ฉันทั้งหมดที่คุณต้องการ โหวตไม่เปลี่ยนความเป็นจริง
— robmuh
1
บางทีเราอาจกำลังทำสิ่งที่แตกต่างกันเล็กน้อย - โอกาสใด ๆ ที่คุณสามารถวางตัวอย่างง่ายๆเพื่อแสดงความแตกต่าง
— Rich Bradshaw
ฉันไม่คิดว่าเป็นคำถามที่เกี่ยวกับสิ่งที่หน่วยงานที่จะใช้ในคำสั่งสื่อ ...
— Binki
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.