Berfikir dalam tingkah laku, bukan saiz skrin

Chase McCoy menulis artikel hebat mengenai "masalah jurang" ketika membuat grid projek. Hujahnya dapat diringkaskan seperti berikut: Bagaimana kita harus menggunakan margin dalam CSS untuk menetapkan jarak unsur? Beliau menegaskan bahawa apabila digunakan dengan Flexbox, atribut Gap tidak cukup sempurna, sebagai contoh:

 .Grid {
  Paparan: Flex;
  Gap: 10px;
}

Pada masa ini menggunakan Gap dengan Flexbox hanya disokong di Firefox, dan saya telah lupa ini dalam beberapa projek. Jadi perhatikan ini.

Bagaimanapun, bahagian kegemaran saya dari catatan blog Chase adalah teknik yang disebutkannya untuk Andy Bell untuk membuat susun atur responsif tanpa pertanyaan media, seperti ini:

 .Grid {
  paparan: grid;
  Grid-Gap: 10px;
  Grid-template-lajur: ulangi (auto-fill, Minmax (150px, 1FR));
}

Fungsi kod CSS ini adalah seperti berikut:

• Buat grid dengan jurang 10px antara lajur dan baris.
• Lebar minimum setiap lajur ialah 150px.
• Setiap lajur mempunyai lebar yang sama (1FR).
• Grid harus secara automatik mengisi sebanyak mungkin lajur.

Perkara yang paling bijak mengenai semua ini ialah grid kami sekarang dengan berkesan melaksanakan respons yang disebabkan oleh minmax - jika penyemak imbas diubahsuai, grid secara automatik akan menyesuaikan diri dengan bilangan lajur yang lebih kecil, seperti ini:

Tiada pertanyaan media diperlukan sama sekali! Sudah tentu, terdapat beberapa cara lain untuk melakukan ini, tetapi saya fikir pendekatan ini pandai, bukan hanya kerana kita mengelakkan pertanyaan media - tetapi kerana ia mengajar kita untuk berfikir tentang merancang dan membina komponen dengan cara yang baru.

Chase meneruskan:

Dengan teknik ini, bukannya menggunakan titik putus untuk menentukan saiz skrin yang harus disusun oleh projek, sebaliknya menentukan saiz minimum yang harus dimiliki oleh unsur -unsur sebelum disusun. Saya suka ini kerana ia menggalakkan pemaju untuk berfikir tentang reka bentuk responsif dari tingkah laku dan bukan perspektif saiz skrin.

"Tingkah laku bukan saiz skrin" adalah cara terbaik untuk berfikir tentang reka bentuk komponen! Banyak masalah yang saya ada ketika membuat komponen untuk sistem reka bentuk adalah kerana saya telah memikirkan saiz skrin -alat, tablet, desktop, dan lain -lain -dan cuba menyesuaikan komponen ini dengan batasan -batasan ini.

Berfikir dari perspektif tingkah laku selalu lebih berkesan kerana terdapat banyak faktor lain yang mempengaruhi komponen selain lebar skrin atau peranti yang kami gunakan. Mungkin kita mahu komponen itu sesuai dengan komponen lain. Atau kami mahu menyelaraskan beberapa teks tambahan dengannya untuk perbandingan.

Sama ada cara, sebenarnya tidak sepenuhnya mungkin untuk berfikir dari perspektif tingkah laku dan bukannya saiz skrin sebelum memiliki pertanyaan kontena, seperti yang ditulis Chris:

Pertanyaan kontena sentiasa senarai teratas penambahbaikan yang diperlukan dalam CSS. Pandangan umum ialah jika kita mempunyai pertanyaan kontena, kita tidak akan menulis banyak pertanyaan media global berdasarkan saiz halaman. Ini kerana kita sebenarnya cuba mengawal bekas tempatan, dan satu -satunya sebab kita menggunakan pertanyaan media untuk ini sekarang ialah ia adalah alat terbaik yang kita ada di CSS. Saya benar -benar percaya pada ini.

Atas ialah kandungan terperinci Berfikir dalam tingkah laku, bukan saiz skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!