Pertanyaan media bertanya: seberapa lebar layarnya? Pertanyaan kontainer menanyakan: seberapa lebar komponen ini? Perbedaan tersebut menentukan di mana breakpoint berada, dan melakukannya dengan benar akan membuat komponen dapat digunakan kembali di tempat lain. Sembilan puluh lima koma delapan satu persen browser mendukung kueri kontainer saat ini.

Gunakan kueri media untuk rencana halaman

  • Tata letak tiga kolom diciutkan menjadi satu kolom di ponsel.
  • Perbedaan antara header tetap dan dokumen aliran normal di layar kecil.
  • Apa pun yang digambarkan pengunjung sebagai 'seluruh halaman' per tampilan.

Gunakan kueri kontainer untuk bagian tersebut

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 140px 1fr; }
}

Kartu sekarang mengetahui aturan tata letaknya sendiri. Letakkan di sidebar dan bertumpuk, letakkan di halaman beranda dan terbagi menjadi dua kolom. Tidak ada media query di dunia yang dapat melakukan hal tersebut, karena media query tidak mengetahui di mana kartu tersebut akan mendarat.

3. Cara mengubah kesalahan breakpoint klasik:

  1. Jangan menulis @media (max-width: 480px) untuk memperbaiki satu widget.
  2. Deklarasikan tipe kontainer pada pembungkusnya. Tanpanya, kueri penampung secara diam-diam tidak cocok dengan apa pun, sebuah kesalahan yang juga tidak terlihat.
  3. Uji di jendela yang dapat diubah ukurannya, tidak hanya di devtools.
Sebuah komponen yang gayanya bergantung pada wadahnya akhirnya benar-benar portabel. Itu sangat bagus.

Aturan migrasi: sentuh halaman, sesuaikan kueri media. Sentuh salah satu komponen, ambil wadahnya. Keduanya bekerja dalam file yang sama, dan tidak ada yang menggantikan yang lain.