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