मोबाइल-फर्स्ट भन्नाले तपाईंको बेस स्टाइलहरू सबैभन्दा सानो स्क्रीन को लागि लेख्नु हो, त्यसपछि 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 लीन र व्यवस्थापनयोग्य राख्छ।
कन्टेनर क्वेरीहरू एक प्रमुख अग्रगति हुन्: तिनीहरूले कम्पोनेन्टहरूलाई आफ्नै उपलब्ध स्पेस मा प्रतिक्रिया गर्न दिन्छन्, जो ठीक त्यो हो जुन तपाईंलाई एक कम्पोनेन्ट-आधारित आर्किटेक्चरमा आवश्यक हुन्छ (डिजाइन प्रणाली, पुन: प्रयोग योग्य कार्डहरू/विजेटहरू) जहाँ एक जै कम्पोनेन्ट धेरै सन्दर्भहरूमा अवतरण हुन्छ।