อะไรคือกฎสำหรับคิวรีสื่อ CSS ที่ทับซ้อนกัน?

Question 1

เราจะจัดพื้นที่แบบสอบถามสื่ออย่างถูกต้องอย่างไรเพื่อหลีกเลี่ยงความซ้ำซ้อน

ตัวอย่างเช่นหากเราพิจารณารหัส:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

จะเกิดอะไรขึ้นในเบราว์เซอร์ที่รองรับทั้งหมดที่ 20em และ 45em?

ฉันเคยเห็นคนใช้: สิ่งต่างๆเช่น 799px แล้ว 800px แต่ความกว้างของหน้าจอ 799.5 พิกเซลล่ะ? (เห็นได้ชัดว่าไม่ใช่บนจอแสดงผลทั่วไป แต่เป็นจอประสาทตา?)

ฉันอยากรู้มากที่สุดเกี่ยวกับคำตอบที่นี่เมื่อพิจารณาจากข้อมูลจำเพาะ

Question 2

อะไรคือกฎสำหรับคิวรีสื่อ CSS ที่ทับซ้อนกัน?

น้ำตก.

@mediaกฎมีความโปร่งใสต่อการเรียงซ้อนดังนั้นเมื่อ@mediaกฎสองข้อขึ้นไปตรงกันในเวลาเดียวกันเบราว์เซอร์ควรใช้สไตล์ในกฎทั้งหมดที่ตรงกันและแก้ไขการเรียงลำดับตามนั้น ¹

จะเกิดอะไรขึ้นในเบราว์เซอร์ที่รองรับทั้งหมดที่ 20em และ 45em?

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

พิจารณาโค้ดตัวอย่างของคุณโดยมีการเพิ่มกฎสไตล์ที่แท้จริง:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

เมื่อวิวพอร์ตของเบราว์เซอร์มีความกว้าง 20em การสืบค้นสื่อทั้งสองนี้จะคืนค่าจริง โดยน้ำตก, display: blockแทนที่display: noneและfloat: leftจะนำไปใช้ในองค์ประกอบใด ๆ .sidebarกับการเรียน

คุณสามารถคิดว่ามันเป็นการใช้กฎราวกับว่าการสืบค้นของสื่อไม่ได้อยู่ที่นั่นเพื่อเริ่มต้นด้วย:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

อีกตัวอย่างหนึ่งของวิธีการเรียงซ้อนเมื่อเบราว์เซอร์ตรงกับข้อความค้นหาสื่อสองรายการขึ้นไปสามารถพบได้ในคำตอบอื่น ๆนี้

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

เราจะจัดพื้นที่แบบสอบถามสื่ออย่างถูกต้องอย่างไรเพื่อหลีกเลี่ยงความซ้ำซ้อน

หากคุณต้องการหลีกเลี่ยงการทับซ้อนกันคุณก็ต้องเขียนคิวรีสื่อที่ไม่ซ้ำกัน

โปรดจำไว้ว่าคำนำหน้าmin-และmax-หมายถึง "รวมขั้นต่ำ" และ "รวมสูงสุด" ซึ่งหมายความว่า(min-width: 20em)และ(max-width: 20em)ทั้งคู่จะจับคู่วิวพอร์ตที่มีความกว้าง 20em

ดูเหมือนว่าคุณจะมีตัวอย่างอยู่แล้วซึ่งนำเราไปสู่คำถามสุดท้ายของคุณ:

ฉันเคยเห็นคนใช้: สิ่งต่างๆเช่น 799px แล้ว 800px แต่ความกว้างของหน้าจอ 799.5 พิกเซลล่ะ? (เห็นได้ชัดว่าไม่ใช่บนจอแสดงผลทั่วไป แต่เป็นจอประสาทตา?)

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

จากการทดลองของฉันดูเหมือนว่า Safari บน iOS จะปัดเศษค่าพิกเซลที่เป็นเศษส่วนทั้งหมดเพื่อให้แน่ใจว่าหนึ่งในmax-width: 799pxและmin-width: 800pxจะตรงกันแม้ว่าวิวพอร์ตจะมีขนาด 799.5px ก็ตาม (ซึ่งเห็นได้ชัดว่าตรงกับค่าเดิม)

¹ _{แม้ว่าจะไม่มีการระบุไว้อย่างชัดเจนในโมดูลกฎเงื่อนไขหรือโมดูลCascade (ซึ่งปัจจุบันมีการกำหนดให้เขียนซ้ำ) แต่การเรียงซ้อนก็มีนัยว่าจะเกิดขึ้นตามปกติเนื่องจากข้อกำหนดระบุเพียงว่าให้ใช้สไตล์ในรูปแบบใด ๆ และ@mediaกฎทั้งหมดที่ตรงกับเบราว์เซอร์หรือสื่อ}

Question 3

ฉันได้ลองทำตามคำแนะนำที่นี่:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

แต่พบว่านี่ไม่ใช่ความคิดที่ดีเพราะตอนนี้ไม่สามารถใช้งานได้บน Chrome ทั้งบนเดสก์ท็อป Ubuntu หรือบนโทรศัพท์ Android ของฉัน (ตามที่อธิบายไว้ที่นี่: calc () ไม่ทำงานในข้อความค้นหาของสื่อ ) แต่ฉันพบวิธีที่ดีกว่า ...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

และแบม!

Question 4

calc()สามารถใช้เพื่อหลีกเลี่ยงสิ่งนี้(min-width: 50em and max-width: calc(50em - 1px)จะถูกซ้อนกันอย่างถูกต้อง) แต่การสนับสนุนเบราว์เซอร์ไม่ดีและฉันไม่อยากแนะนำ

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

ข่าวสาร:

คนอื่น ๆ บางคนที่กล่าวถึงการไม่ใช้emหน่วยจะช่วยในการเรียงลำดับการค้นหาของคุณ