Mobile-first a chiallaíonn go scríobhann tú do stíleanna bonn do an scáileán is lú, ansin cuireann tú castacht ar scáileáin níos fearr le media queries min-width — ní hé a thosaigh ar dheasc agus gach rud a bhaint ar shiúl.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Cén fáth a bhíonn feidhm ag mobile-first: fanann CSS bonn minimal (ní fhaigheann mobile ach an rud atá de dhíth uirthi — go maith do fheidhmíocht ar ghléasanna níos lageolacha), agus leagann tú castacht, ar bhealach is éasca a thuiscint é ná a sháru/bhaint ar shiúl. Comhionannaíonn sé freisin an chaoi ar fhliuchann an t-inneachar go nádúrtha ó cholún amháin go go leor.
Freagraíonn media queries don viewport — an fhuinneog ar fad. Ach d'fhéadfadh comhpháirt athúsáidte (abair cárta) a bheith i limistéar leathan príomhúil nó i mbar taobhlíne caol ar an leathanach céanna. Ní féidir le leithead an viewport a insint duit cé mhéad spáis atá ag an chomhpháirt go fírinneach.
.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; }
}
Anois athraíonn an cárta céanna go huathoibríoch go leagan cothrománach nuair a bhíonn a chonláithir ≥400px — go bhfuil sé sin toisc go bhfuil an scáileán mór nó toisc go bhfuil sé i gcolún leathan. Bíonn an comhpháirt i ndáiríre neamhspleách ar an gcomhthéacs agus athúsáidte.
Coimeádann mobile-first CSS freagartha éadrom agus inchothromaithe.
Is dul chun cinn mór iad container queries: tugann siad deis do chomhpháirteanna freagra a thabhairt don spás atá ar fáil dóibh féin, arb é sin go díreach an rud atá ag teastáil uait i ailtireachta bhunaithe ar chomhpháirteanna (córais dhearaidh, caranna/giuirléidí athúsáidte) ina bhfuil an chomhpháirt chéanna i go leor comhthéacsanna.
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús