CSS Academy · บทเรียน

หน่วยคิวรีคอนเทนเนอร์: cqw cqh

กำหนดขนาดองค์ประกอบให้สัมพันธ์กับคอนเทนเนอร์สำหรับคิวรีด้วย cqw, cqh และหน่วยคอนเทนเนอร์อื่นที่เกี่ยวข้อง

บทเรียน 3 จาก 413 ขั้นตอน

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

หน่วยของคิวรีคอนเทนเนอร์

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

cqw — ความกว้างของคิวรีคอนเทนเนอร์

1cqw = 1% ของขนาดในแนวอินไลน์ของคอนเทนเนอร์ (ความกว้างเมื่อเขียนแนวนอน) ใช้ปรับขนาดตัวอักษรและระยะห่างให้สัมพันธ์กับคอนเทนเนอร์ของคอมโพเนนต์

<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>

cqh — ความสูงของคิวรีคอนเทนเนอร์

1cqh = 1% ของขนาดในแนวบล็อกของคอนเทนเนอร์ (ความสูง) จำเป็นต้องใช้ container-type: size (ไม่ใช่เพียง inline-size)

<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>

cqi — แนวอินไลน์ของคอนเทนเนอร์

cqi เป็นชื่อแทนของ cqw ในการเขียนแนวนอน โดยอ้างอิงมิติในแนวอินไลน์โดยเฉพาะ (ไม่ได้ผูกกับแนวนอน)

cqb — แนวบล็อกของคอนเทนเนอร์

cqb คล้ายกับ cqh แต่จะอิงตามมิติ โดยอ้างอิงขนาดในแนวบล็อกไม่ว่าจะใช้โหมดการเขียนแบบใด

cqmin และ cqmax

cqmin = 1% ของมิติที่เล็กกว่าของคอนเทนเนอร์ cqmax = 1% ของมิติที่ใหญ่กว่า มีลักษณะคล้ายกับ vmin/vmax

<div class="icon-wrapper"><div class="icon"></div></div>

การจัดรูปแบบตัวอักษรแบบยืดหยุ่นในคอมโพเนนต์

หน่วยของคอนเทนเนอร์ช่วยให้จัดรูปแบบตัวอักษรแบบยืดหยุ่นที่จำกัดขอบเขตอยู่ในคอมโพเนนต์ได้อย่างแท้จริง:

<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>

ควรใช้หน่วยของคอนเทนเนอร์เมื่อใด

ใช้หน่วยของคอนเทนเนอร์เมื่อ:

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

หน่วยของคอนเทนเนอร์เทียบกับหน่วยของวิวพอร์ต

ความแตกต่างสำคัญคือ หน่วยของวิวพอร์ต (vw, vh) อ้างอิงวิวพอร์ตของเบราว์เซอร์ ส่วนหน่วยของคอนเทนเนอร์ (cqw, cqh) อ้างอิงคอนเทนเนอร์ที่ใช้คิวรีซึ่งอยู่ใกล้ที่สุด ทำให้คอมโพเนนต์พกพาไปใช้ที่ใดก็ได้อย่างแท้จริง โดยคอมโพเนนต์เดียวกันจะแสดงผลได้สัดส่วนเหมาะสมทั้งในแถบด้านข้างกว้าง 300px และพื้นที่หลักกว้าง 900px

จำเป็นต้องมี: container-type

หน่วยของคอนเทนเนอร์จะทำงานได้ก็ต่อเมื่อมีบรรพบุรุษที่กำหนด container-type หากไม่มี หน่วยคิวรีคอนเทนเนอร์จะใช้หน่วยวิวพอร์ตขนาดเล็ก (svw/svh) เป็นทางเลือกสำรอง

รูปแบบการใช้งานจริง

คอมโพเนนต์แบบเต็มที่ใช้หน่วยของคอนเทนเนอร์:

<div class="feature">
  <h2 class="feature-title">Feature Name</h2>
  <p class="feature-text">A short description of this feature that scales with the container.</p>
</div>

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

font-size: 5cqw จะให้ผลอย่างไรในคอมโพเนนต์ที่อยู่ภายในคอนเทนเนอร์กว้าง 400px

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

หน่วยคิวรีคอนเทนเนอร์ (cqw, cqh, cqi, cqb, cqmin, cqmax) จะกำหนดขนาดค่าโดยอิงตามคอนเทนเนอร์ที่ใช้คิวรีแทนวิวพอร์ต ใช้ cqw สำหรับการจัดรูปแบบตัวอักษรแบบยืดหยุ่นที่ปรับตามความกว้างของคอมโพเนนต์ หน่วยเหล่านี้จำเป็นต้องมีบรรพบุรุษที่กำหนด container-type จึงจะทำงานได้ หากไม่มี หน่วยเหล่านี้จะใช้หน่วยวิวพอร์ตเป็นทางเลือกสำรอง

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “หน่วยคิวรีคอนเทนเนอร์: cqw cqh” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “หน่วยคิวรีคอนเทนเนอร์: cqw cqh”

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

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

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

บทเรียน “หน่วยคิวรีคอนเทนเนอร์: cqw cqh” ใช้เวลานานแค่ไหน

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

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

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

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

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