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.
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; }
) 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 ... */ }
) 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; } }
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!