Mobile-first yana nufin ka rubuta ainihin siffofin ka don mafi ƙaramin allon, sannan ka ƙara masoyi don manyan allon tare da min-width media queries — maimakon fara daga teburi kuma cire komai.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
**Yaƙin mobile-first ya san: CSS na asali ya kasance kadan (wayar simu ta samu daidai nawa take bukatarsa — kyau don aiki a karamin na'ura), kuma ka taayi masoyi, wanda ya fi bayarwa zuwa guje/cire sa. Haka nan ma ya gabatar da yadda abun ciki ya bada dari daga sai daya zuwa gida.
Media queries suna amsa ga viewport — cikakken taglaba. Amma wasu marubuci da za a iya amfani dasu (ce kardi) na iya bayyana a gida mai faɗi ko gida mai ƙaura a jere ɗaya. Faɗin viewport ba zai iya gaya maka kai yadda marubuci ke da waje a zahiri.
.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; }
}
Ijiya karda ta giji daga gida mai sarkakiya daidai sanakuwa jifinta ≥400px — ba tilo kwari da cikakken allon babbar allon ko saboda yana jeren faɗi. Marubuci ya zama gaske independent da reusable.
Mobile-first yana ajiyar CSS mai amsa kadan da mafita.
Container queries su ne babbar ci gaba: suna ba wa marubuci damar amsa ga sararin da aka iya akari, wanda ne daidai abin da kake bukatar a cikin architecture na marubuci (tsarin zane, kardi/sannan da za a iya amfani dasu) inda marubuci ɗaya ya fadi a yawancin halin.