रिस्पोंसिव वेबपेज डिजाइन - मीडिया क्वेरी
- पिछला पृष्ठ RWD ग्रिड व्यू
- अगला पृष्ठ RWD इमेज
मीडिया क्वेरी क्या है?
मीडिया क्वेरी CSS3 में जोड़ी गई एक CSS तकनीक है。
विशेष शर्तों को पूरा करने पर ही इसे उपयोग किया जाता है @media योजना के लिए नियमों के द्वारा CSS गुणों के ब्लॉक को उद्धृत करने के लिए।
उदाहरण
यदि ब्राउज़र विंडो 600px या कम है, तो पृष्ठभूमि रंग फीके नीला होगा:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ब्रेकपाइंट जोड़ें
इस ट्यूटोरियल में पहले, हमने एक साइट बनाई थी जो लेन और स्तम्भ शामिल थे, लेकिन इस रिस्पोंसिव वेबसाइट छोटे स्क्रीन पर अच्छा नहीं दिखाई देती थी。
मीडिया क्वेरी आपको मदद कर सकती है। हम एक ब्रेकपाइंट जोड़ सकते हैं, जहां डिजाइन के कुछ हिस्से ब्रेकपाइंट के प्रत्येक तरफ अलग-अलग दिखाई देंगे。
डेस्कटॉप कंप्यूटर
मोबाइल
768px पर मीडिया क्वेरी जोड़कर ब्रेकपाइंट योजना बनाएं:
उदाहरण
जब स्क्रीन (ब्राउज़र विंडो) 768px से कम हो तो, प्रत्येक स्तम्भ की चौड़ाई 100% होनी चाहिए:
/* डेस्कटॉप डिवाइस के लिए: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* मोबाइल के लिए: */
[class*="col-"] {
width: 100%;
}
}
हमेशा मोबाइल पहले डिजाइन
मोबाइल पहले (Mobile First) यह अर्थ देता है कि हम टेबलेट या किसी अन्य डिवाइस के लिए डिजाइन करने से पहले, मोबाइल डिवाइस के लिए डिजाइन करना है (इससे पैजे छोटे डिवाइसों पर तेजी से दिखाई देगा)。
इसका मतलब है कि हमें CSS में कुछ सुधार करना होगा。
जब चौड़ाई 768px से कम हो तो, हमें डिजाइन को बदलना चाहिए नहीं, चौड़ाई को बदलना चाहिए नहीं। 'मोबाइल पहले' डिजाइन को ऐसे ही बनाया है:
उदाहरण
/* मोबाइल के लिए: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* डेस्कटॉप के लिए: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
एक और ब्रेकपाइंट
आप कितनी भी ब्रेकपाइंट जोड़ सकते हैं。
हम इसके अलावा प्लेटफॉर्म और मोबाइल के बीच एक ब्रेकपाइंट जोड़ेंगे。
डेस्कटॉप कंप्यूटर
प्लेटफॉर्म
मोबाइल
इसलिए, हमने एक मीडिया क्वेरी (600 पिक्सल में) जोड़ी है और 600 पिक्सल से अधिक (बजाय 768 पिक्सल) के डिवाइस के लिए एक नई क्लास समूह जोड़ा है:
उदाहरण
ध्यान दें कि दो जोड़े लगभग एक से समान हैं, एकमात्र अंतर नाम (col- और col-s-) में है:}
/* मोबाइल के लिए: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* प्लेटफॉर्म के लिए: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* डेस्कटॉप के लिए: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
दो जोड़े हैं के लिए कला प्रतीक काफी अजीब लगता है, लेकिन यह हमें एचटीएमएल के द्वारा प्रत्येक ब्रेकपाइंट पर स्तम्भों के लिए क्या होगा तय करने का अवसर देता है:
HTML उदाहरण
डेस्कटॉप के लिए:
पहला और तीसरा भाग 3 स्तम्भों को पार करेंगे. मध्यम भाग 6 स्तम्भों को पार करेगा.
प्लेटफॉर्म के लिए:
पहला भाग 3 स्तम्भों को पार करेगा, दूसरा भाग 9 स्तम्भों को पार करेगा, तीसरा भाग पहले दोनों के नीचे दिखाया जाएगा और 12 स्तम्भों को पार करेगा:
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
सामान्य उपकरण ब्रेकपाइंट
उच्चारण और चौड़ाई के अलग-अलग स्क्रीन और उपकरण की संख्या अनगिनत है, इसलिए प्रत्येक उपकरण के लिए विशिष्ट ब्रेकपाइंट बनाना मुश्किल है। सरलता के लिए, आप इन पांच समूहों को लक्ष्य कर सकते हैं:
उदाहरण
/* अत्यधिक छोटे उपकरण (फोन, 600px और उससे कम) */
@media only screen and (max-width: 600px) {...}
/* छोटे उपकरण (उभय दिशा के पैड और बड़े मोबाइल, 600 पिक्सल और उससे बड़ा) */
@media only screen and (min-width: 600px) {...}
/* मध्यम उपकरण (अनुकूल पैड, 768 पिक्सल और उससे बड़ा) */
@media only screen and (min-width: 768px) {...}
/* बड़े उपकरण (लैपटॉप/डेस्कटॉप, 992px और उससे बड़ा) */
@media only screen and (min-width: 992px) {...}
/* अत्यधिक बड़े उपकरण (बड़े लैपटॉप और डेस्कटॉप, 1200px और उससे बड़ा) */
@media only screen and (min-width: 1200px) {...}
दिशा: चित्र / प्रकृति
मीडिया क्वेरी ब्राउज़र की दिशा के अनुसार पृष्ठ के रूपांकन को बदलने के लिए भी उपयोग की जा सकती है。
आप एक समग्र CSS गुणों का सेट निर्धारित कर सकते हैं जो केवल ब्राउज़र विंडो की चौड़ाई उच्चाई से बड़ी होने पर लागू होते हैं, जिसे 'लंबवत्ता' दिशा कहा जाता है:
उदाहरण
यदि दिशा के लिए लंबवत्ता मोड (landscape mode) है, तो वेबपेज का पृष्ठभूमि अधिक नीला होगा:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
मीडिया क्वेरी से एलिमेंट को छुपाना
मीडिया क्वेरी का एक अन्य सामान्य उपयोग विभिन्न स्क्रीन आकार पर एलिमेंट को छुपाना है:
उदाहरण
/* यदि स्क्रीन आकार 600 पिक्सल या उससे कम है, तो इस एलिमेंट को छुपाएं */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
मीडिया क्वेरी से फ़ॉन्ट साइज को संशोधित करना
आप अभी भी मीडिया क्वेरी का उपयोग करके विभिन्न स्क्रीन आकार पर एलिमेंट के फ़ॉन्ट साइज को बदल सकते हैं:
उदाहरण
/* यदि स्क्रीन आकार 601px या उससे बड़ा है, तो <div> के font-size को 80px रखें */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* यदि स्क्रीन आकार 600px या कम है, तो <div> के font-size को 30px में सेट करें */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media रेफ़रेंस मैनुअल
सभी मीडिया टाइपों और विशेषताओं/एक्सप्रेशन्स के पूर्ण समीक्षा के लिए CSS रेफ़रेंस मैनुअल में @media रूल को देखें.
- पिछला पृष्ठ RWD ग्रिड व्यू
- अगला पृष्ठ RWD इमेज
