Susun atur responsif, lebih sedikit pertanyaan media

Reka bentuk responsif adalah asas kepada pembangunan web moden. Pertanyaan media telah lama menjadi penting, tetapi kemajuan CSS menawarkan teknik untuk mengurangkan pergantungan mereka dengan ketara. Artikel ini menunjukkan cara membuat susun atur responsif dengan pertanyaan media yang minimum, atau bahkan sifar, menghasilkan kod yang lebih bersih dan lebih banyak.

Kami akan meneroka pendekatan flexbox dan grid untuk mencapai respons tanpa titik break query media yang jelas.

Memanfaatkan Flexbox dan flex-wrap

Contoh mudah menggunakan flex: 400px untuk menetapkan lebar asas untuk elemen. Item membungkus ke garisan baru apabila ruang yang tidak mencukupi wujud. Ruang yang tinggal diedarkan di antara unsur -unsur pada setiap baris. flex: 400px adalah singkat untuk flex-grow: 1; flex-shrink: 1; flex-basis: 400px; .

Pendekatan ini menawarkan keringkasan (dua baris kod), tetapi tidak mempunyai kawalan halus ke atas lebar kaki yang konsisten, item setiap baris, dan tingkah laku pembalut.

Menggunakan auto-fit dan minmax dengan grid CSS

Grid CSS, menggunakan repeat(auto-fit, minmax(400px, 1fr)) , menyediakan lebar asas yang sama, dengan tingkah laku pembalut. Unsur -unsur berkembang untuk mengisi ruang yang ada, mengekalkan lebar yang konsisten merentasi baris. Walau bagaimanapun, item tidak boleh mengecut di bawah 400px, berpotensi menyebabkan limpahan.

Mengawal item setiap baris

Menapis pendekatan Flexbox, kami menggantikan flex: 400px dengan flex: max(400px, (100% - 20px)/3); . Ini mengehadkan setiap baris hingga maksimum tiga item. 20px menyumbang dua jurang (dengan mengandaikan jurang 10px antara item). Formula yang lebih umum, max(400px, 100%/(N 1) 0.1%) , menghapuskan keperluan untuk pengiraan jurang yang jelas, di mana n mewakili bilangan maksimum item setiap baris. Ini memberikan kawalan separa ke atas item setiap baris. Prinsip yang sama berlaku untuk grid CSS.

Memastikan barang berkembang dan mengecut

Untuk menangani masalah limpahan dengan pendekatan grid, kami menggunakan clamp(100%/(N 1) 0.1%, 400px, 100%) . Ini memastikan item berkembang untuk mengisi ruang yang ada tetapi tidak melebihi lebar kontena.

Betul -betul mengawal pembalut

Untuk mengawal apabila item membungkus, kami mengubah suai formula clamp() untuk: clamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%) . Apabila lebar skrin (100VW) melebihi 400px, kami mempunyai item n setiap baris. Di bawah 400px, kami mendapat satu item lebar penuh setiap baris, dengan berkesan membuat titik putus tanpa pertanyaan media. 400px bertindak sebagai titik putus di sini.

Mengendalikan pelbagai titik putus

Untuk menguruskan peralihan antara pelbagai jumlah item (misalnya, dari n item n hingga m setiap baris), kami clamp() fungsi: clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) . W1 dan W2 mewakili titik putus. Ini membolehkan tingkah laku responsif yang canggih dengan perisytiharan CSS tunggal. Sarang lebih lanjut memanjangkan ini kepada lebih banyak titik putus.

Mensimulasikan pertanyaan kontena

Dengan menggantikan 100vw dengan 100% , kita boleh mensimulasikan pertanyaan kontena, menjadikan susun atur responsif kepada lebar kontena dan bukannya viewport.

Teknik Lanjutan

Di luar kawalan lajur, kita boleh membuat gaya bersyarat berdasarkan dimensi elemen atau saiz skrin.

Warna latar bersyarat: Menggunakan kecerunan linear, kita boleh mengubah warna latar belakang secara kondusif berdasarkan lebar elemen:

 div {
  Latar Belakang: Linear -Gradient (hijau 0 0) 0 / max (0px, 100px - 100%) 1px, merah;
}

Toggling Element Visibility: Kami boleh mensimulasikan elemen bersembunyi berdasarkan saiz skrin menggunakan clamp() dan overflow: hidden; .

Menukar Kedudukan Elemen: Kita boleh menyesuaikan kedudukan elemen secara dinamik (contohnya, top , left ) berdasarkan saiz skrin menggunakan clamp() .

Kesimpulan

Walaupun pertanyaan media kekal berharga, teknik -teknik ini menunjukkan bagaimana untuk mencapai reka bentuk responsif yang canggih dengan pergantungan yang dikurangkan kepada mereka. Tumpuannya bukan untuk menghapuskan pertanyaan media sepenuhnya, tetapi untuk mengoptimumkan kod dan memanfaatkan keupayaan CSS untuk mewujudkan susun atur yang dinamik dan responsif. Strategi ini menawarkan kawalan yang kuat dan kod bersih, meningkatkan kebolehkerjaan dan kecekapan.

Atas ialah kandungan terperinci Susun atur responsif, lebih sedikit pertanyaan media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!