CSS Academy · Pelajaran

Unit Kueri Kontainer: cqw cqh

Atur ukuran elemen secara relatif terhadap kontainer kuerinya menggunakan cqw, cqh, dan unit kontainer terkait.

Unit Kueri Kontainer: cqw cqh adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Unit Kueri Kontainer

CSS menyediakan unit relatif terhadap kontainer yang menentukan ukuran nilai sebagai persentase dimensi kontainer kueri — mirip dengan unit area pandang (vw/vh), tetapi relatif terhadap kontainer komponen.

cqw — Lebar Kueri Kontainer

1cqw = 1% dari ukuran sebaris kontainer (lebar dalam penulisan horizontal). Skalakan tipografi dan spasi relatif terhadap kontainer komponen.

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

cqh — Tinggi Kueri Kontainer

1cqh = 1% dari ukuran blok kontainer (tinggi). Memerlukan container-type: size (bukan hanya inline-size).

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

cqi — Sebaris Kontainer

cqi adalah alias untuk cqw dalam penulisan horizontal — secara khusus merujuk pada dimensi sebaris (tidak terikat pada arah horizontal).

cqb — Blok Kontainer

cqb mirip cqh, tetapi relatif terhadap dimensi — merujuk pada ukuran blok terlepas dari mode penulisan.

cqmin dan cqmax

cqmin = 1% dari dimensi kontainer yang lebih kecil. cqmax = 1% dari dimensi yang lebih besar. Analog dengan vmin/vmax.

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

Tipografi Fluida dalam Komponen

Unit kontainer memungkinkan tipografi fluida yang benar-benar terbatas pada cakupan komponen:

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

Kapan Menggunakan Unit Kontainer

Gunakan unit kontainer ketika:

Teks komponen perlu diskalakan mengikuti lebar komponen
Spasi di dalam komponen perlu proporsional terhadap ukurannya
Anda menginginkan desain fluida tingkat komponen yang tidak bergantung pada area pandang

Unit Kontainer Dibandingkan dengan Unit Area Pandang

Perbedaan utamanya: unit area pandang (vw, vh) merujuk pada area pandang peramban. Unit kontainer (cqw, cqh) merujuk pada kontainer kueri terdekat. Hal ini membuat komponen benar-benar portabel — komponen yang sama tampak proporsional baik di bilah sisi selebar 300px maupun di area utama selebar 900px.

Wajib: container-type

Unit kontainer hanya berfungsi jika terdapat leluhur dengan container-type. Tanpa leluhur tersebut, unit kueri kontainer kembali menggunakan unit area pandang kecil (svw/svh).

Pola Praktis

Komponen lengkap yang menggunakan unit kontainer:

<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>

Pemeriksaan Singkat

Apa hasil font-size: 5cqw pada komponen yang berada di dalam kontainer selebar 400px?

Ringkasan

Unit kueri kontainer (cqw, cqh, cqi, cqb, cqmin, cqmax) menentukan ukuran nilai relatif terhadap kontainer kueri, bukan area pandang. Gunakan cqw untuk tipografi fluida yang diskalakan mengikuti lebar komponen. Unit-unit ini memerlukan leluhur container-type agar berfungsi — tanpa leluhur tersebut, unit-unit ini kembali menggunakan unit area pandang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Unit Kueri Kontainer: cqw cqh” gratis?

Ya — teks lengkap “Unit Kueri Kontainer: cqw cqh” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Unit Kueri Kontainer: cqw cqh”?

Atur ukuran elemen secara relatif terhadap kontainer kuerinya menggunakan cqw, cqh, dan unit kontainer terkait. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Unit Kueri Kontainer: cqw cqh” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy