Berhenti Bergaduh dengan Pertanyaan Media! Gunakan Pertanyaan Bekas CSS Sebaliknya

Pernah membina komponen yang kelihatan sempurna dalam kandungan utama anda tetapi pecah di bar sisi? ?

Pertanyaan media hanya menyelesaikan separuh masalah - mereka mementingkan saiz skrin, bukan di mana komponen anda sebenarnya berada. Di situlah Pertanyaan Kontena masuk.

Apakah Masalah dengan Pertanyaan Media?

Katakan anda telah membina komponen kad ini:

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

Kelihatan hebat pada mudah alih dan desktop! Sehingga... rakan sepasukan anda meletakkannya di bar sisi yang sempit. Sekarang susun atur "desktop" anda cuba untuk memerah ke dalam ruang 300px. Aduh.

Ingin meningkatkan kemahiran CSS anda? Lihat "Teknik CSS Moden Yang Menggantikan JavaScript Saya" untuk melihat cara CSS tulen boleh menggantikan kod JavaScript yang kompleks.

Pertanyaan Kontena: Cara yang Lebih Baik

Daripada bertanya "berapa lebar skrin?", Pertanyaan Kontena bertanya "berapa lebar bekas saya?" Begini cara mereka berfungsi:

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

Kini kad anda menyesuaikan diri dengan bekasnya, bukan skrin. Letakkannya di mana-mana - ia hanya berfungsi!

Contoh Sebenar: Kad Produk Pintar

Berikut ialah kad produk yang menyesuaikan diri dengan mana-mana ruang:

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

Sokongan Penyemak Imbas?

Berita baik! Pertanyaan Kontena berfungsi dalam semua penyemak imbas moden. Untuk penyemak imbas yang lebih lama, reka letak mudah alih anda menjadi sandaran:

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

Ingin mengetahui butiran UI tersebut? "12 Interaksi Mikro Bahagian Depan yang Diam-diam Pengguna Diadili" mendedahkan interaksi halus yang membuatkan tapak web berasa digilap.

Petua Pantas

1. Jangan sarang pertanyaan kontena terlalu dalam - ia menjadi kucar-kacir
2. Gunakan saiz sebaris dan bukannya saiz apabila anda hanya memerlukan lebar
3. Uji komponen anda dalam bekas bersaiz berbeza

Cubalah Sendiri!

1. Pilih komponen yang tinggal di berbilang tempat
2. Tambahkan jenis bekas: saiz sebaris pada pembalutnya
3. Gantikan pertanyaan media dengan pertanyaan kontena
4. Tonton ia menyesuaikan diri secara automatik!

Ingin Ketahui Lebih Lanjut?

• Panduan MDN
• Bolehkah Saya Gunakan - Pertanyaan Bekas

Lepaskan ulasan jika anda membina sesuatu yang menarik dengan Pertanyaan Kontena! ?

Atas ialah kandungan terperinci Berhenti Bergaduh dengan Pertanyaan Media! Gunakan Pertanyaan Bekas CSS Sebaliknya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!