మోబైల్-ఫర్స్ట్ అంటే మీ బేస్ స్టైల్లను చిన్నतమ స్క్రీన్కు రాయడం, ఆపై min-width మీడియా క్వెరీలతో పెద్ద స్క్రీన్ల కోసం సంక్లిష్టత జోడించడం — డెస్క్టాప్ నుండి ప్రారంభించి విషయాలను తీసివేయడం కంటే.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
ఎందుకు మోబైల్-ఫర్స్ట్ గెలుస్తుంది: బేస్ CSS కనిష్టంగా ఉంటుంది (మోబైల్ కేవలం అవసరమైనవన్నిని పొందుతుంది — బలహీన ডివైస్లలో పనితీరు బాగానుంటుంది), మరియు మీరు సంక్లిష్టతను పొరలుగా జోడిస్తారు, ఇది దీన్ని కోల్పోవడం/తీసివేయడం కంటే తర్కించడం సులభం. ఇది కంటెంట్ ఒక నిలువు వరుస నుండి అనేకానికి ఎలా సహజంగా వెనుకకు ఎగిరిపోతుందో కూడా సరిపోతుంది.
మీడియా క్వెరీలు వీక్షణ — మొత్తం విండో నుండి ప్రతిస్పందిస్తాయి. కానీ పునర్ఉపయోగ చేయదగిన కాంపోనెంట్ (ఒక కార్డ్ చెప్పండి) విస్తృత ప్రధాన ప్రాంతంలో లేదా ఇదే పేజీలో ఇరుకైన సైడ్బార్లో కనిపించవచ్చు. వీక్షణ వెడల్పు కాంపోనెంట్ నిజానికి ఎంత స్థలం ఉందో చెప్పలేదు.
.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 ను చక్కనిగా మరియు నిర్వహించదగినదిగా ఉంచుతుంది.
కంటైనర్ క్వెరీలు ఒక ప్రధాన పురోగతి: అవి కాంపోనెంట్లను వాటి సొంత అందుబాటులో ఉన్న స్థలానికి ప్రతిస్పందించనివ్వుతాయి, ఇది ఖచ్చితంగా కంపోనెంట్-ఆధారిత ఆర్కిటెక్చర్లో మీకు కావాలిది (డిజైన్ సిస్టమ్లు, పునర్ఉపయోగ చేయదగిన కార్డ్లు/విడ్జెట్లు) ఇక్కడ ఒకే కాంపోనెంట్ చాలా సందర్భాలలో ఇgilbert్ఘటిస్తుంది.