Mobile-first bermaksud menulis gaya asas anda untuk skrin terkecil, kemudian menambah kerumitan untuk skrin yang lebih besar dengan media query min-width — dan bukannya bermula pada desktop dan menanggalkan elemen.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Mengapa mobile-first menang: CSS asas kekal minimum (mudah alih hanya mendapat apa yang diperlukan — bagus untuk prestasi pada peranti yang lebih lemah), dan anda melapiskan kerumitan, yang lebih mudah difikirkan daripada menulis-ganti/membuangnya. Ia juga sepadan dengan cara kandungan mengalir semula secara semula jadi daripada satu lajur kepada banyak.
Media query bertindak balas terhadap viewport — keseluruhan tetingkap. Tetapi komponen yang boleh diguna semula (katakan satu kad) mungkin muncul dalam kawasan utama yang luas atau dalam bar sisi yang sempit pada halaman yang sama. Lebar viewport tidak dapat memberitahu anda berapa banyak ruang yang komponen itu sebenarnya ada.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Kini kad yang sama secara automatik bertukar kepada susun atur mendatar setiap kali bekasnya ≥400px — sama ada kerana skrin itu besar atau kerana ia berada dalam lajur yang luas. Komponen itu menjadi benar-benar bebas-konteks dan boleh diguna semula.
Mobile-first memastikan CSS responsif kekal ringkas dan boleh diselenggara.
Container query ialah satu kemajuan besar: ia membolehkan komponen bertindak balas terhadap ruang yang tersedia untuk dirinya sendiri, iaitu tepat apa yang anda perlukan dalam seni bina berasaskan komponen (sistem reka bentuk, kad/widget yang boleh diguna semula) di mana komponen yang sama mendarat dalam banyak konteks.