Beberapa kali pertanyaan saiz kontena akan membantu saya

Teknologi pertanyaan kontena CSS menjadi semakin matang, dan banyak pemaju mula cuba memohon kepada pelbagai projek, walaupun ia hanya eksperimen mudah. Walaupun sokongan penyemak imbas tidak sepenuhnya popular, ia cukup praktikal dalam beberapa projek, tetapi mungkin tidak cukup untuk menggantikan pertanyaan media dalam projek yang lebih lama.

pertanyaan kontena memang sangat mudah! Malah, saya telah dalam beberapa situasi dan saya sangat bersemangat untuk menggunakannya, tetapi saya terhad oleh keserasian pelayar. Jika pertanyaan kontena boleh digunakan pada masa itu, kesannya akan lebih baik.

Semua demo berikut paling baik dilihat dalam Chrome atau Safari pada masa penulisan. Firefox merancang untuk memberi sokongan dalam versi 109.

kes 1: grid kad

semua orang harus akrab dengan kes ini, bukan? Ini adalah corak yang sangat biasa yang hampir kita hadapi. Tetapi sebenarnya ialah jika pertanyaan kontena boleh digunakan dan bukan pertanyaan media standard, ia akan menjimatkan banyak masa dan mendapatkan hasil yang lebih baik.

Katakan anda perlu membina grid kad yang memerlukan setiap kad untuk mengekalkan nisbah aspek 1: 1:

Ini lebih sukar daripada yang kelihatan! Masalahnya ialah saiz semula kandungan komponen berdasarkan lebar viewport akan membolehkan anda tertakluk kepada bagaimana komponen bertindak balas terhadap viewport, dan bagaimana bekas nenek moyang lain bertindak balas terhadap pandangan. Sebagai contoh, jika anda mahu saiz fon tajuk kad menurun apabila ia mencapai saiz inline tertentu, tidak ada cara yang boleh dipercayai untuk melakukan ini.

Anda boleh menetapkan saiz fon menggunakan unit VW, tetapi komponen masih terikat pada lebar paparan pelayar. Ini boleh menyebabkan masalah apabila grid kad digunakan dalam konteks lain yang mungkin tidak mempunyai titik putus yang sama.

Dalam projek sebenar saya, saya mengambil kaedah JavaScript:

Dengarlah saiz semula acara.
Kirakan lebar setiap kad.
Tambah saiz fon inline mengikut lebar kad.
Gunakan unit EM untuk menetapkan gaya dalaman.

Ia kelihatan seperti banyak kerja, bukan? Tetapi ini adalah penyelesaian yang stabil untuk mencapai skala yang dikehendaki dalam saiz skrin yang berbeza dan dalam konteks yang berbeza.

pertanyaan kontena akan lebih baik kerana ia menyediakan

unit pertanyaan kontena , seperti unit CQW. Seperti yang anda pelajari, 1CQW adalah sama dengan 1% daripada lebar bekas. Kami juga mempunyai unit CQI, yang merupakan ukuran lebar selaras bekas, dan CQB digunakan untuk lebar blok kontena. Jadi jika kita mempunyai bekas kad lebar 500px, nilai 50cqw dikira sebagai 250px.

Jika saya boleh menggunakan pertanyaan kontena dalam grid kad saya, saya boleh menetapkan komponen

ke bekas: .card

<code>.card { 
  container: card / size;
}</code>

Saya kemudian boleh menyediakan pembungkus dalaman dengan padding menggunakan unit CQW yang skala sebanyak 10% daripada lebar

: .card

<code>.card__inner { 
  padding: 10cqw; 
} </code>

Ini adalah cara yang baik untuk secara konsisten skala jarak antara pinggir kad dan kandungannya, tanpa mengira di mana kad digunakan pada lebar paparan yang diberikan. Tiada pertanyaan media diperlukan!

idea lain? Gunakan unit CQW sebagai saiz fon kandungan dalaman, dan kemudian gunakan mengisi menggunakan unit EM:

<code>.card { 
  container: card / size;
}</code>

5CQW adalah nilai sewenang -wenang - Saya baru memilih nilai. Padding masih sama dengan 10cqw, kerana unit EM adalah relatif kepada saiz fon .card__inner!

adakah anda melihatnya? 2EM berbanding dengan saiz fon 5cqw yang ditetapkan pada bekas yang sama ! Bekas berfungsi secara berbeza daripada yang kita gunakan kerana unit EM adalah relatif kepada nilai saiz fon elemen yang sama. Tetapi saya dengan cepat menyedari bahawa unit pertanyaan kontena berkaitan dengan ibu bapa baru -baru ini (juga bekas) . Contohnya, dalam contoh ini, 5CQW tidak skala berdasarkan lebar elemen :

.card Sebaliknya, ia akan skala kepada ibu bapa terdekat yang ditakrifkan sebagai bekas. Itulah sebabnya saya menyediakan pembungkus

.

<code>.card__inner { 
  padding: 10cqw; 
} </code>

kes 2: susun atur berganti .card__inner

Dalam projek lain, saya juga memerlukan komponen kad lain. Kali ini, saya memerlukan kad untuk beralih dari susun atur mendatar ke susun atur menegak apabila skrin menjadi lebih kecil ... dan kemudian kembali ke susun atur mendatar sekali lagi, dan kembali ke susun atur menegak.

Saya melakukan pekerjaan yang menakutkan ini untuk menjadikan komponen menjadi potret dalam dua julat viewport tertentu (salam kepada sintaksis pertanyaan media baru!), Tetapi masalahnya adalah bahawa ia kemudian dikunci pada pertanyaan media yang ditetapkan untuknya, ibu bapa, dan apa -apa lagi yang mungkin bertindak balas terhadap lebar paparan. Kami memerlukan sesuatu yang berfungsi dalam apa jua keadaan tanpa bimbang tentang di mana kandungan akan terganggu!

pertanyaan kontena dengan mudah dapat menyelesaikan masalah ini kerana penggunaan aturan

:

@container satu pertanyaan, tak terhingga lancar:

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

tapi tunggu! Terdapat beberapa isu yang mungkin perlu anda ketahui. Khususnya, menggunakan pertanyaan kontena sedemikian dalam sistem reka bentuk berasaskan prop boleh menjadi sukar. Sebagai contoh, komponen ini mungkin mengandungi komponen kanak -kanak yang bergantung kepada prop untuk mengubah penampilan mereka.

Mengapa ini penting? Susun atur potret kad mungkin memerlukan gaya alternatif, tetapi anda tidak boleh mengubah prop JavaScript menggunakan CSS. Oleh itu, anda boleh mengulangi gaya yang anda mahukan. Saya sebenarnya membincangkan ini dan bagaimana menyelesaikannya dalam jawatan lain. Sekiranya anda perlu menggunakan pertanyaan kontena untuk sejumlah besar gaya, anda mungkin perlu membina keseluruhan sistem reka bentuk di sekelilingnya, dan bukannya cuba memasukkannya ke dalam sistem reka bentuk yang sedia ada yang bergantung kepada pertanyaan media.

.info-card kes 3: stroke svg

Ini adalah satu lagi corak yang sangat biasa yang saya gunakan baru -baru ini. Katakan anda mempunyai ikon yang dikunci dengan tajuk:

Walaupun tanpa pertanyaan media, mudah untuk skala ikon mengikut saiz tajuk. Walau bagaimanapun, masalahnya ialah

SVG boleh menjadi terlalu nipis untuk diperhatikan dalam saiz yang lebih kecil, dan boleh terlalu tebal dan terlalu jelas dalam saiz yang lebih besar.

Saya terpaksa membuat dan memohon kelas untuk setiap contoh ikon untuk menentukan saiz dan lebar stroknya. Ini adalah OK jika ikon berada di sebelah tajuk yang menggunakan saiz fon tetap, tetapi ia tidak baik apabila menggunakan jenis cecair yang sentiasa berubah.

Saiz fon tajuk mungkin berdasarkan lebar paparan, jadi ikon SVG perlu diselaraskan dengan sewajarnya dan akan berfungsi dengan baik pada saiz apa pun. Anda boleh menetapkan lebar strok relatif kepada saiz fon tajuk dengan menggunakan unit EM. Walau bagaimanapun, jika anda perlu berpegang pada satu set saiz strok tertentu, kaedah ini tidak berfungsi kerana ia berskala secara linear - tanpa menggunakan pertanyaan media pada lebar viewport, anda tidak boleh menyesuaikannya dengan nilai lebar strok tertentu tanpa menggunakan pertanyaan media pada lebar viewport.

Walau bagaimanapun, jika saya mempunyai peluang untuk menggunakan pertanyaan kontena, saya akan melakukan ini:

<code>.card { 
  container: card / size;
}</code>

Bandingkan pelaksanaan ini dan lihat bagaimana versi pertanyaan kontena menangkap strok SVG ke lebar tertentu yang saya mahu berdasarkan lebar bekas.

Kandungan Tambahan: Jenis Pertanyaan Saiz Kontena Lain

OK, saya sebenarnya tidak menemui ini dalam projek sebenar. Walau bagaimanapun, apabila saya melihat dengan teliti maklumat mengenai pertanyaan kontena, saya perhatikan bahawa kita boleh menanyakan kandungan lain yang berkaitan dengan saiz kontena atau saiz fizikal.

Contoh -contoh yang saya gunakan dalam jawatan ini kebanyakannya lebar pertanyaan, lebar maksimum dan minimum, ketinggian, saiz blok, dan saiz sebaris.

<code>.card__inner { 
  padding: 10cqw; 
} </code>

tetapi MDN menggariskan dua perkara lain yang boleh kita tanya. Satu adalah arah, yang membuat banyak akal kerana kami telah menggunakannya dalam pertanyaan media. Begitu juga dengan pertanyaan kontena:

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

yang lain adalah nisbah aspek, percaya atau tidak:

<code>.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}</code>

Ini adalah demonstrasi yang boleh diedit yang boleh digunakan untuk bereksperimen dengan kedua -dua contoh ini:

Saya tidak pernah menemui kes -kes penggunaan yang baik untuk kedua -dua mereka. Sekiranya anda mempunyai idea atau rasa ia dapat membantu anda dengan projek anda, sila beritahu saya dalam komen!

Atas ialah kandungan terperinci Beberapa kali pertanyaan saiz kontena akan membantu saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!