Pengenalan kepada pertanyaan kontena di CSS

pertanyaan kontena CSS: merevolusikan reka bentuk responsif

Petikan ini dari melepaskan kuasa CSS meneroka potensi transformasi pertanyaan kontena dalam membuat komponen web yang boleh disesuaikan dan berdaya tahan. Tidak seperti pertanyaan media Viewport yang bertindak balas terhadap saiz tetingkap penyemak imbas keseluruhan, pertanyaan kontena membenarkan gaya berdasarkan ruang yang tersedia , membolehkan responsif peringkat komponen yang benar-benar.

pertanyaan kontena vs. Queries Media Viewport

Reka bentuk responsif berasaskan viewport tradisional bergantung pada titik putus yang terikat dengan saiz peranti mudah (mudah alih, tablet, desktop), sering digabungkan dengan grid susun atur. Pendekatan ini bergelut dengan kebolehsuaian komponen individu; Unsur -unsur yang lebih besar mungkin menyesuaikan secara berasingan, tetapi secara amnya mengikuti titik putus global.

pertanyaan kontena menawarkan penyelesaian yang unggul. Imej berikut menunjukkan komponen kad yang digayakan dengan pertanyaan kontena, sepenuhnya bebas daripada saiz viewport. Penampilan kad menyesuaikan diri secara dinamik ke ruang yang tersedia.

Nota: Sokongan penyemak imbas luas untuk pertanyaan kontena wujud sejak Firefox 110. Polyfills tersedia untuk pelayar yang lebih tua.

Menentukan pertanyaan kontena

Untuk menggunakan pertanyaan kontena, mula -mula mengisytiharkan elemen sebagai bekas menggunakan harta .

(bersamaan dengan lebar dalam mod penulisan mendatar) adalah nilai yang paling biasa dan disokong secara meluas:

container-type inline-size Seterusnya, gunakan at-peraturan

untuk menentukan pertanyaan. Contoh berikut menetapkan warna

.container {
  container-type: inline-size;
}

ke biru apabila bekasnya lebar 40ch atau lebih besar:

@container h2 Untuk keserasian yang lebih luas di seluruh mod penulisan, gunakan sifat logik:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

di luar

, pilihan termasuk

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

dan

. Rujuk spesifikasi rasmi untuk butiran lanjut. inline-size block-size aspect-ratio Meningkatkan Komponen Kad: Contoh Praktikal

Tanpa pertanyaan kontena, variasi kad biasanya melibatkan kelas pengubah yang terikat pada titik putus pandangan. Imej di bawah mempamerkan tiga saiz kad dan kelas yang sepadan.

[Codepen Demo: Viewport Media Query Cards] (Pautan ke Codepen)

Menggunakan pertanyaan kontena, kami mengekalkan gaya kad lalai (untuk penyemak imbas yang tidak disokong) dan menentukan gaya tambahan berdasarkan lebar kontena:

• 350px atau lebih besar: susun atur mendatar
• 600px atau lebih besar: imej sebagai latar belakang

[codepen demo: pertanyaan kontena untuk kad] (pautan ke codepen)

Petikan ini adalah dari

melepaskan kuasa CSS: Teknik canggih untuk antara muka pengguna yang responsif , tersedia di SitePoint Premium.

Takeaways utama:

pertanyaan kontena menawarkan respons tinggi komponen.
mereka ditakrifkan menggunakan
• dan container-type. @container
sifat logik meningkatkan keserasian mod silang.
Mereka memberikan pendekatan yang lebih fleksibel dan berbutir kepada reka bentuk responsif daripada pertanyaan media Viewport.

(Nota: Ganti "Pautan ke Codepen" dengan pautan codepen sebenar jika tersedia.)

Atas ialah kandungan terperinci Pengenalan kepada pertanyaan kontena di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!