Petua Pantas: Komponen CSS yang Berdaya Penghantaran

Artikel ini menunjukkan bagaimana pertanyaan kontena dalam CSS mencipta komponen yang berdaya tahan dan boleh diguna semula dengan variasi susun atur terbina dalam, mencapai pendekatan "membina sekali, menggunakan di mana-mana". Contohnya memberi tumpuan kepada borang langganan yang menyesuaikan diri dengan saiz skrin yang berbeza.

Borang menggunakan grid CSS untuk fleksibiliti susun atur. Tiga kawasan grid (legenda, medan, hantar) ditakrifkan, dan perubahan susunannya berdasarkan lebar kontena menggunakan pertanyaan kontena. Video menunjukkan pelarasan susun atur.

elemen

ditetapkan sebagai bekas menggunakan .subscription-form. Div bersarang container-type: inline-size; disasarkan oleh pertanyaan kontena: .form__content

.subscription-form {
  container-type: inline-size;
}

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

pertanyaan kontena pertama (

) mentakrifkan templat grid untuk susun atur bersaiz sederhana: @container (min-width: 375px)

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}

pertanyaan kedua (

) menyesuaikan susun atur untuk skrin yang lebih besar: @container (min-width: 700px)

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}

video lain menunjukkan tingkah laku responsif.

Demo Codepen menyediakan contoh interaktif secara langsung. Pendekatan ini mempamerkan kuasa pertanyaan kontena untuk mewujudkan komponen CSS yang boleh diguna semula dan boleh disesuaikan. Petikan ini adalah dari

melepaskan kuasa CSS .

Atas ialah kandungan terperinci Petua Pantas: Komponen CSS yang Berdaya Penghantaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!