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 हो — भले ही स्क्रीन बड़ी हो या यह एक चौड़े कॉलम में हो। कंपोनेंट वास्तव में संदर्भ-स्वतंत्र और पुन: उपयोग योग्य बन जाता है।
Mobile-first प्रतिक्रियाशील CSS को हल्का और बनाए रखने योग्य रखता है।
कंटेनर क्वेरीज एक बड़ी प्रगति हैं: वे कंपोनेंट्स को अपनी खुद की उपलब्ध जगह पर प्रतिक्रिया करने देती हैं, जो कि ठीक वही है जो आपको कंपोनेंट-आधारित आर्किटेक्चर (डिजाइन सिस्टम, पुन: उपयोग करने योग्य कार्ड/विजेट) में चाहिए जहां एक ही कंपोनेंट कई संदर्भ में आता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें