เมื่อเขียนเคียวรีสื่อบันทึก CSS มีวิธีใดบ้างที่คุณสามารถระบุหลายเงื่อนไขด้วยตรรกะ "OR"

ฉันกำลังพยายามทำสิ่งนี้:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

ใช้เครื่องหมายจุลภาคเพื่อระบุกฎที่แตกต่างกันสอง (หรือมากกว่า):

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

จากhttps://developer.mozilla.org/en/CSS/Media_queries/

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

CSS Media Queries & ผู้ประกอบการตรรกะ: ภาพรวมโดยย่อ;)

คำตอบด่วน

แยกกฎด้วยเครื่องหมายจุลภาค: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

คำตอบที่ยาว

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

คำค้นหาสื่อ

โดยทั่วไปแล้วการสืบค้นของสื่อจะใช้ในการออกแบบเว็บเพื่อสร้างประสบการณ์การสืบค้นเฉพาะอุปกรณ์หรือสถานการณ์ นี้จะกระทำโดยใช้@mediaการประกาศภายในของหน้าเว็บCSS สิ่งนี้สามารถใช้เพื่อแสดงเว็บเพจที่แตกต่างกันภายใต้สถานการณ์จำนวนมาก: ไม่ว่าคุณจะอยู่บนแท็บเล็ตหรือทีวีที่มีอัตราส่วนกว้างยาวต่างกันไม่ว่าอุปกรณ์ของคุณจะมีหน้าจอสีหรือขาวดำหรือบางทีบ่อยที่สุด ผู้ใช้เปลี่ยนขนาดของเบราว์เซอร์หรือสลับไปมาระหว่างอุปกรณ์การเรียกดูที่มีขนาดหน้าจอที่แตกต่างกัน (โดยทั่วไปแล้วการพูดการออกแบบเช่นนี้เรียกว่าResponsive Web Design )

ผู้ประกอบการเชิงตรรกะ

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

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

1. AND ( และคำหลัก)

กำหนดให้ต้องปฏิบัติตามเงื่อนไขทั้งหมดที่ระบุไว้ก่อนที่กฎการจัดแต่งทรงผมจะมีผล

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

ที่ระบุกฎจัดแต่งทรงผมจะไม่เข้าไปในสถานที่เว้นแต่ทั้งหมดต่อไปนี้การประเมินเป็นจริง:

• ประเภทสื่อคือ 'หน้าจอ' และ
• วิวพอร์ตมีความกว้างอย่างน้อย 700px และ
• การวางแนวหน้าจอเป็นแนวนอนในปัจจุบัน

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

2. หรือ ( รายการที่คั่นด้วยเครื่องหมายจุลภาค )

แทนที่จะใช้หรือคำสำคัญรายการที่คั่นด้วยเครื่องหมายจุลภาคจะถูกใช้ในการโยงข้อความค้นหาสื่อหลายรายการเข้าด้วยกันเพื่อสร้างกฎสื่อที่ซับซ้อนยิ่งขึ้น

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

กฎการกำหนดสไตล์ที่ระบุจะมีผลเมื่อเคียวรีสื่อบันทึกใด ๆประเมินว่าเป็นจริง :

1. ประเภทสื่อคือ 'Handheld' หรือ
2. วิวพอร์ตมีความกว้างอย่างน้อย 650px หรือ
3. การวางแนวหน้าจอเป็นแนวนอนในปัจจุบัน

3. ไม่ ( ไม่ใช่คำหลัก)

ไม่คำหลักที่สามารถนำมาใช้ในการลบล้างเดียวแบบสอบถามสื่อ (และไม่ได้เป็นสื่อเต็มรูปแบบกฎ --meaning ว่ามันขัดแย้งกับรายการระหว่างชุดของเครื่องหมายจุลภาคและไม่สื่อเต็มรูปแบบกฎต่อไปนี้การประกาศ @media ก)

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

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

สไตล์ที่ระบุไว้ที่นี่จะมีผลบังคับใช้ถ้า

1. ประเภทสื่อและความละเอียดขั้นต่ำไม่ตรงตามความต้องการ ('หน้าจอ' และ '300dpi' ตามลำดับ) หรือ
2. วิวพอร์ตมีความกว้างอย่างน้อย 800 พิกเซล

กล่าวอีกนัยหนึ่งหากประเภทสื่อคือ 'หน้าจอ' และความละเอียดต่ำสุดคือ 300 dpi กฎจะไม่มีผลบังคับใช้เว้นแต่ว่าความกว้างขั้นต่ำของวิวพอร์ตคืออย่างน้อย 800 พิกเซล

(คำหลักที่ไม่สามารถเป็นรัฐขี้ขลาดเล็กน้อยให้ฉันรู้ว่าถ้าฉันสามารถทำได้ดีกว่า;)

4. เท่านั้น ( คำหลักเท่านั้น )

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

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

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

สำหรับข้อมูลเพิ่มเติม

สำหรับข้อมูลเพิ่มเติม (รวมถึงคุณสมบัติเพิ่มเติมที่สามารถสอบถามได้) ดู: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

ทำความเข้าใจกับคำศัพท์เกี่ยวกับการสืบค้นสื่อ

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

สื่อกฎ (MDN ยังดูเหมือนว่าจะเรียกงบสื่อเหล่านี้) รวมถึงคำ@mediaที่มีทั้งหมดของคำสั่งสื่อที่ตามมาของมัน

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

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

screen (หมายเหตุ: มีการใช้งานฟีเจอร์การสืบค้นเพียงรายการเดียวที่นี่)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

handheld, (min-width: 650px)ไม่ (สังเกตเครื่องหมายจุลภาค: มีข้อความค้นหาสื่อสองคำที่นี่)

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

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

ตัวอย่างโค้ดและข้อมูลที่ได้จาก:

การสืบค้นสื่อ CSSโดยผู้สนับสนุน Mozilla (ได้รับลิขสิทธิ์ภายใต้CC-BY-SA 2.5 ) ตัวอย่างโค้ดบางส่วนถูกนำไปใช้กับการเปลี่ยนแปลงเล็กน้อยเพื่อ (คำอธิบาย) เพื่อเพิ่มความชัดเจนของคำอธิบาย

มีสองวิธีในการเขียนแบบสอบถามสื่อที่เหมาะสมใน CSS หากคุณกำลังเขียนข้อความค้นหาสื่อจากอุปกรณ์ที่ใหญ่กว่าก่อนวิธีที่ถูกต้องคือ:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

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

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}