Rumah > hujung hadapan web > tutorial css > Petua Pantas: Komponen CSS yang Berdaya Penghantaran

Petua Pantas: Komponen CSS yang Berdaya Penghantaran

Joseph Gordon-Levitt
Lepaskan: 2025-02-09 11:37:11
asal
247 orang telah melayarinya

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.

Quick Tip: Shipping Resilient CSS Components

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;
}
Salin selepas log masuk
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 ... */
}
Salin selepas log masuk
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;
  }
}
Salin selepas log masuk
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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan