การรวมมีเดียคิวรีหลายรายการ
ใช้ตัวดำเนินการ and, or และ not เพื่อรวมฟีเจอร์มีเดียเป็นคิวรีที่ซับซ้อน
การรวมมีเดียคิวรีหลายรายการ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวดำเนินการ and
คีย์เวิร์ด and กำหนดให้ทุกเงื่อนไขเป็นจริงพร้อมกัน มีประโยชน์สำหรับกำหนดเป้าหมายอุปกรณ์ที่มีขนาดและประเภทเฉพาะเจาะจงร่วมกัน
<div class="box">and operator demo</div>
ช่วงที่ใช้ร่วมกับ and
การใช้ min-width และ max-width ร่วมกับ and จะกำหนดเป้าหมายช่วงความกว้างของหน้าต่างแสดงผลที่เฉพาะเจาะจง (รูปแบบสำหรับแท็บเล็ตเท่านั้น):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
เครื่องหมายจุลภาคแทน OR
คิวรีที่คั่นด้วยจุลภาคทำงานเหมือน OR — รูปแบบจะมีผลเมื่อคิวรีใดคิวรีหนึ่งตรงกัน:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
ตัวดำเนินการ not
not จะกลับค่าคิวรีสื่อทั้งชุด ต้องใช้อย่างระมัดระวัง — เพราะมีผลกับนิพจน์คิวรีทั้งหมด ไม่ใช่เฉพาะเงื่อนไขแรก
<div class="doc">not operator demo</div>
not กับวงเล็บ (สมัยใหม่)
คิวรีสื่อระดับ 4 สมัยใหม่อนุญาตให้ใช้ not() เป็นฟังก์ชันกับคุณลักษณะแต่ละรายการ:
<div class="panel">not() function demo</div>
คีย์เวิร์ด only (แบบเดิม)
คีย์เวิร์ด only ใช้เพื่อซ่อนคิวรีสื่อจากเบราว์เซอร์รุ่นเก่าที่ไม่รองรับคุณลักษณะสื่อ เบราว์เซอร์สมัยใหม่จะไม่สนใจคีย์เวิร์ดนี้ แต่การมีอยู่ของคีย์เวิร์ดก็ไม่ก่อปัญหา
<div class="box">only keyword demo</div>
การซ้อนคิวรีสื่อ (การซ้อน CSS)
เมื่อใช้การซ้อน CSS แบบเนทีฟ คุณสามารถเขียนคิวรีสื่อไว้ภายในบล็อกตัวเลือกได้:
<div class="card">Nested media query demo</div>
การรวมอุปกรณ์เคลื่อนที่ + DPI สูง
กำหนดเป้าหมายอุปกรณ์เคลื่อนที่โดยเฉพาะ (ขนาดเล็กและมี DPI สูง):
<div class="icon"></div>
การพิมพ์ + สี
คุณลักษณะสื่อหลายรายการสำหรับรูปแบบการพิมพ์ที่มีผลเฉพาะกับเครื่องพิมพ์สี:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
คิวรีสื่อใน @import
สามารถใช้คิวรีสื่อขณะนำเข้าเพื่อโหลดไฟล์สไตล์ชีตทั้งไฟล์ตามเงื่อนไขได้ (แต่การทำเช่นนี้จะขัดขวางการแสดงผล จึงควรใช้เท่าที่จำเป็น):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
คุณสมบัติเชิงตรรกะในคิวรีซับซ้อน
ตามหลักทั่วไป คิวรีที่เรียบง่ายจะดูแลรักษาได้ง่ายกว่า หลีกเลี่ยงการต่อเงื่อนไขจำนวนมากเข้าด้วยกัน เมื่อคิวรีมีความซับซ้อน ให้พิจารณาปรับโครงสร้างแนวทางการเขียน CSS แทนการทำให้คิวรีซับซ้อนขึ้น
ตรวจสอบอย่างรวดเร็ว
คิวรีสื่อใดใช้รูปแบบเมื่อหน้าต่างแสดงผลกว้างอย่างน้อย 600px หรืออุปกรณ์อยู่ในแนวนอน?
สรุป
and กำหนดให้เงื่อนไขทั้งหมดเป็นจริง เครื่องหมายจุลภาคทำหน้าที่เป็น OR ระหว่างคิวรี not กลับค่าคิวรีทั้งชุด ใช้ min-width และ max-width ร่วมกันเพื่อกำหนดเป้าหมายเป็นช่วง CSS สมัยใหม่รองรับการซ้อนคิวรีสื่อภายในบล็อกตัวเลือกและไวยากรณ์ช่วง เพื่อให้นิพจน์อ่านง่ายขึ้น
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “การรวมมีเดียคิวรีหลายรายการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรวมมีเดียคิวรีหลายรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรวมมีเดียคิวรีหลายรายการ”
ใช้ตัวดำเนินการ and, or และ not เพื่อรวมฟีเจอร์มีเดียเป็นคิวรีที่ซับซ้อน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การรวมมีเดียคิวรีหลายรายการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป
- คิวรีความกว้าง ความสูง และแนวหน้าจอ
- Prefers-Color-Scheme และ Prefers-Reduced-Motion
- การรวมมีเดียคิวรีหลายรายการ