Susun atur 'pintar' dengan pertanyaan kontena

CSS moden terus menawarkan penyelesaian yang inovatif dan mudah untuk cabaran reka bentuk lama. Walau bagaimanapun, kemajuan ini sering memperkenalkan kemungkinan baru di luar penyelesaian masalah semata-mata. Pertanyaan kontena mencontohkan ini, menyampaikan jalan baru yang menarik untuk reka bentuk susun atur. Walau bagaimanapun, persamaan mereka dengan pertanyaan media boleh membawa kepada pemotongan keupayaan unik mereka.

Walaupun pertanyaan media memainkan peranan penting dalam reka bentuk web responsif, mereka mempunyai batasan yang wujud. Mereka tidak mempunyai kesedaran kontekstual, bergantung terutamanya pada saiz viewport dan saiz fon awal penyemak imbas (bukan saiz fon akar yang ditakrifkan dalam CSS anda).

Pertimbangkan contoh ini:

html {
  font-size: 32px;
}

body {
  background: lightsalmon;
}

@media (min-width: 35rem) {
  body {
    background: lightseagreen;
  }
}

Intuitif, seseorang mungkin menganggap perubahan warna latar belakang pada lebar viewport 1120px (35rem

32px). Ini tidak betul. Pertanyaan media hanya mempertimbangkan saiz fon awal penyemak imbas (biasanya 16px, tetapi boleh laras pengguna), seperti yang dinyatakan dalam spesifikasi pertanyaan media: Unit panjang relatif berdasarkan nilai awal, bebas daripada nilai yang diisytiharkan. Pilihan reka bentuk ini menghalang gelung tak terhingga dalam senario seperti:

Pertanyaan kontena, sebaliknya, menawarkan kecerdasan unggul. Mereka secara langsung menilai saiz bekas, menghapuskan keperluan untuk "nombor sihir" dalam titik putus.

html {
  font-size: 16px;
}

@media (min-width: 30rem) {
  html {
    font-size: 32px;
  }
}

Contohnya, untuk membuat grid tiga lajur pada saiz yang lebih besar, pertanyaan media memerlukan pengiraan titik putus yang tepat. Dengan pertanyaan kontena, kami menentukan lebar lajur minimum, dan susun atur menyesuaikan diri dengan sewajarnya. Jika kita mahu tiga lajur 300px, kita tahu bekas 900px akan mencukupi. Ini tidak akan berfungsi dengan pasti dengan pertanyaan media kerana kebolehubahan saiz kontena dalam viewport. Tambahan pula, pertanyaan kontena menyokong mana -mana unit, termasuk

(lebar aksara), yang membolehkan susun atur berdasarkan kandungan teks.

Contoh: ch

Pendekatan ini dipertingkatkan lagi dengan penggunaan

dalam pertanyaan kontena (seperti yang dicadangkan oleh Miriam Suzanne):

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

.grid {
  display: grid;
  gap: 1rem;

  @container (width > 90ch) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.

calc() @container (width > calc(30ch * 3)) Pertimbangan Praktikal dan Penyelesaian:

Pertanyaan kontena memerlukan elemen kontena yang ditetapkan. Ini memerlukan unsur -unsur pembalut, yang boleh menjadi rumit, terutamanya dengan item grid atau flex. Walau bagaimanapun, dengan menggunakan membolehkan grid utama berfungsi sebagai bekas:

repeat(auto-fit, ...) Ini membolehkan gaya berdasarkan bilangan lajur:

.grid-auto-fit {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%)), 1fr);
  container-type: inline-size;
}

Walaupun sifat tersuai untuk titik putus akan meningkatkan pengalaman pemaju, fungsi semasa menawarkan kelebihan yang ketara.

/* 2 columns + gap */
@container (width > calc(30ch * 2 + 1rem)) { ... }

/* 3 columns + gaps */
@container (width > calc(30ch * 3 + 2rem)) { ... }

Pertimbangan Flexbox:

Pertanyaan kontena boleh digunakan untuk Flexbox, tetapi padding dan sempadan pada item flex tidak dipertimbangkan oleh algoritma Flexbox, yang berpotensi membawa kepada perubahan susun atur yang tidak dijangka. Oleh itu, grid sering disukai untuk jenis susun atur responsif ini.

Kesimpulannya, pertanyaan kontena menawarkan pendekatan yang lebih pintar dan fleksibel untuk reka bentuk responsif, melampaui batasan pertanyaan media dan membuka peluang kreatif baru.

Atas ialah kandungan terperinci Susun atur 'pintar' dengan pertanyaan kontena. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!