CSS Academy · บทเรียน

คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี

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

คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

ความแตกต่างพื้นฐาน

คิวรีสื่อตอบสนองต่อมิติของ วิวพอร์ต ส่วนคิวรีคอนเทนเนอร์ตอบสนองต่อมิติของ คอนเทนเนอร์แม่ ความแตกต่างนี้เป็นตัวกำหนดว่าควรใช้เครื่องมือใดกับปัญหาใด

คิวรีสื่อ: ควรใช้เมื่อใด

ใช้คิวรีสื่อสำหรับ:

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

คิวรีคอนเทนเนอร์: ควรใช้เมื่อใด

ใช้คิวรีคอนเทนเนอร์สำหรับ:

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

เหตุผลด้านการใช้งานได้หลายบริบท

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

การใช้งานร่วมกัน

แอปพลิเคชันจริงใช้ทั้งสองแบบ คิวรีสื่อกำหนดเค้าโครงระดับมหภาค (มีแถบด้านข้างเมื่อความกว้างอยู่ในระดับเดสก์ท็อป) ส่วนคิวรีคอนเทนเนอร์กำหนดพฤติกรรมของคอมโพเนนต์ภายในเค้าโครงนั้น

<div class="layout">
  <div class="sidebar"><div class="card">Sidebar card</div></div>
  <div class="main-content"><div class="card">Main card</div></div>
</div>

ความจำเพาะของคิวรีคอนเทนเนอร์

ต่างจากคิวรีสื่อ (ซึ่งไม่เพิ่มความจำเพาะ) คิวรีคอนเทนเนอร์จะเพิ่มความจำเพาะตามบริบท กฎภายใน @container (min-width: 400px) มีความจำเพาะเท่ากับกฎเดียวกันที่อยู่นอกคิวรี แต่จะมีผลเฉพาะภายในบริบทของคอนเทนเนอร์นั้น

การรองรับของเบราว์เซอร์

คิวรีคอนเทนเนอร์ได้รับการรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2023 (โครม 105 ขึ้นไป ไฟร์ฟอกซ์ 110 ขึ้นไป ซาฟารี 16 ขึ้นไป) ปัจจุบันสามารถใช้ได้อย่างปลอดภัยในโครงการใหม่โดยไม่ต้องมีทางเลือกสำรองสำหรับเบราว์เซอร์สมัยใหม่ที่เป็นเป้าหมาย

การปรับปรุงแบบค่อยเป็นค่อยไปด้วย @supports

สำหรับโครงการที่จำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า ให้ใช้ @supports เพื่อตรวจสอบการรองรับคิวรีคอนเทนเนอร์:

<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>

การเปรียบเทียบด้านประสิทธิภาพ

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

การแก้ไขข้อผิดพลาดของคิวรีคอนเทนเนอร์

โครม DevTools จะแสดงป้าย "cq" ถัดจากองค์ประกอบคอนเทนเนอร์ในแผงองค์ประกอบ คลิกป้ายดังกล่าวเพื่อแสดงขอบเขตของคอนเทนเนอร์และทดสอบเงื่อนไขของคิวรีคอนเทนเนอร์ด้วยตัวตรวจสอบเค้าโครงของ DevTools

ตรวจสอบอย่างรวดเร็ว

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

สรุป

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

คำถามที่พบบ่อย

บทเรียน “คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี”

ทำความเข้าใจว่าเมื่อใดควรใช้คิวรีคอนเทนเนอร์แทนมีเดียคิวรีของพื้นที่แสดงผลสำหรับการออกแบบที่แบ่งเป็นองค์ประกอบ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

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

บทเรียน “คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy