Mobile-first એટલે કે તમે તમાના બેસ સ્ટાઈલ સૌથી નાની સ્ક્રીન માટે લખો, પછી min-width મીડિયા ક્વેરીઝ સાથે મોટી સ્ક્રીનો માટે જટિલતા ઉમેરો — ડેસ્કટોપથી શરુ કરીને અને બધું દૂર કરવા બદલે.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
મોબાઇલ-ફર્સ્ટ શા માટે જીતે છે: બેસ CSS ન્યૂનતમ રહે છે (મોબાઇલને ફક્ત તેની જરૂર છે તે મળે છે — નબળી ડિવાઇસ પર કામગીરી માટે સારું), અને તમે જટિલતા સ્તર કરો છો, જે તેને ઓવરરાઇડ/દૂર કરવા કરતાં સમજવું સરળ છે. તે એ પણ મેળ ખાય છે કે કન્ટેન્ટ કુદરતી રીતે એક કોલમથી બધા સુધી કેવી રીતે રીફ્લો થાય છે.
મીડિયા ક્વેરીઝ viewport પર પ્રતિક્રિયા આપે છે — આખી વિન્ડો. પરંતુ ફરી વાપરી શકાય તેવો કમ્પોનેન્ટ (કહો કે કાર્ડ) પહોળું મુખ્ય વિસ્તારમાં અથવા સમાન પૃષ્ઠ પર સાંકડી બાજુની પટ્ટીમાં દેખાઈ શકે છે. Viewport પહોળાઈ તમને કહી શકતી નથી કે કમ્પોનેન્ટ પાસે ખરેખર કેટલી જગ્યા છે.
.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; }
}
હવે સમાન કાર્ડ જ્યારે પણ તેનું કન્ટેનર ≥400px હોય ત્યારે આપમેળે આડું લેઆઉટમાં સુંવાય છે — તે ભલે સ્ક્રીન મોટી હોય અથવા તે પહોળી કોલમમાં હોય. કમ્પોનેન્ટ ખરેખર સંદર્ભ-સ્વતંત્ર અને ફરી વાપરી શકાય તેવું બને છે.
મોબાઇલ-ફર્સ્ટ પ્રતિક્રિયાશીલ CSS કો પાતળું અને સંચાલનીય રાખે છે.
કન્ટેનર ક્વેરીઝ એક મુખ્ય અગ્રગતિ છે: તેઓ કમ્પોનેન્ટ્સને તેમના પોતાના ઉપલબ્ધ સ્થાનમાં પ્રતિક્રિયા આપવાની મંજૂરી આપે છે, જે ચોક્કસપણે તે છે જેની તમને ઘટક-આધારિત આર્કિટેક્ચર (ડિઝાઇન સિસ્ટમ્સ, ફરી વાપરી શકાય તેવા કાર્ડ/વિજેટ્સ) માં જરૂર છે જ્યાં સમાન કમ્પોનેન્ટ ઘણા સંદર્ભમાં આવે છે.