Jangan lupa pertanyaan kontena

Pertanyaan kontena CSS selalu menjadi salah satu ciri yang pemaju sangat menuntut peningkatan. Ini adalah pandangan umum bahawa jika kita mempunyai pertanyaan kontena, kita tidak perlu menulis banyak pertanyaan media global berdasarkan saiz halaman. Kerana apa yang kita benar -benar mahu mengawal adalah bekas tempatan, dan sekarang kita hanya boleh melaksanakannya menggunakan pertanyaan media, semata -mata kerana ia adalah alat terbaik dalam CSS. Saya setuju dengan ini.

Tetapi ada juga pandangan yang muncul dari semasa ke semasa: "Pemaju berpendapat bahawa pertanyaan kontena diperlukan, tetapi mereka tidak." Saya tidak bersetuju dengan kenyataan ini. Jika pertanyaan kontena tersedia, kami jelas dapat melakukan banyak perkara yang berguna dengannya, yang paling penting adalah untuk menulis lebih bersih, lebih mudah untuk pelabuhan, lebih mudah untuk memahami kod. Nampaknya konsensus untuk membina UI berasaskan komponen hari ini, yang menjadikan permintaan untuk pertanyaan kontena lebih jelas.

Pada masa ini terdapat beberapa kaedah JavaScript moden yang dapat membantu kami menggunakan pertanyaan kontena hari ini - tetapi itu tidak bermakna bahawa teknologi ini perlu tinggal di alam JavaScript. Ia lebih masuk akal dalam CSS.

Berikut adalah beberapa pemikiran saya mengenai topik ini pada akhir tahun 2019:

• "Komponen responsif: Penyelesaian: Penyelesaian untuk menyelesaikan masalah pertanyaan kontena" menunjukkan cara yang baik untuk menggunakan resizeobserver JavaScript untuk menyelesaikan masalah semasa. Ia berfungsi dengan baik dan berfungsi di mana -mana sahaja. Laman web demo adalah yang terbaik kerana ia menyoroti keperluan komponen responsif (walaupun terdapat kes penggunaan yang didokumenkan lain). Philip juga mengatakan penyelesaian CSS tulen akan lebih ideal.
• Sekitar setahun yang lalu, CSS bersarang menyebabkan kegilaan. Perbincangan seolah -olah menunjukkan bahawa bersarang boleh dilaksanakan. Sebagai peguam bela lama untuk bersarang sass rasional, saya bersetuju dengan itu. Ini membuat saya tertanya -tanya sama ada sintaks pertanyaan kontena boleh mengambil kesempatan daripada sesuatu yang serupa. Mungkin skop pertanyaan bersarang terhad kepada pemilih induk? Atau adakah anda menggunakan Ampersand sebagai awalan untuk mewakili penyata media, seperti spesifikasi semasa dengan pemilih keturunan?
• Sintaks yang dicadangkan lain biasanya melibatkan penggunaan beberapa jenis kolon, seperti .container:media(max-width: 400px) { } . Saya suka ini juga. Pemilih kolon tunggal (pseudo -pemilih) secara falsafah "memilih unsur -unsur di bawah syarat -syarat ini" - sebagai contoh :hover , :nth-child , dan lain -lain - jadi skop media masuk akal.
• Saya tidak fikir sintaks adalah halangan terbesar untuk ciri ini; Ini prestasi pelaksanaannya. Sejauh yang saya tahu yang terakhir, ia lebih banyak daripada isu prestasi, ia mengganggu keseluruhan proses rendering bagaimana pelayar berfungsi. Ini seolah -olah menjadi halangan besar. Tetapi saya masih tidak mahu melupakannya. Terdapat banyak inovasi yang berlaku di Internet, dan hanya kerana ia tidak jelas bagaimana untuk mencapainya hari ini tidak bermakna bahawa esok tiada siapa yang akan mencari jalan yang baik ke hadapan.

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