उत्तरदायी वेब डिज़ाइन - मीडिया प्रश्न
मीडिया क्वेरी क्या है?
मीडिया क्वेरी CSS3 में पेश की गई एक CSS तकनीक है।
यह @mediaसीएसएस गुणों के एक ब्लॉक को शामिल करने के लिए नियम का उपयोग केवल तभी करता है जब कोई निश्चित शर्त सत्य हो।
उदाहरण
यदि ब्राउज़र विंडो 600px या उससे छोटी है, तो पृष्ठभूमि का रंग हल्का नीला होगा:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ब्रेकपॉइंट जोड़ें
इस ट्यूटोरियल में पहले हमने रो और कॉलम के साथ एक वेब पेज बनाया था, और यह रेस्पॉन्सिव था, लेकिन यह छोटे स्क्रीन पर अच्छा नहीं लगता था।
मीडिया के प्रश्न इसमें मदद कर सकते हैं। हम एक ब्रेकपॉइंट जोड़ सकते हैं जहां डिज़ाइन के कुछ हिस्से ब्रेकपॉइंट के प्रत्येक तरफ अलग-अलग व्यवहार करेंगे।
डेस्कटॉप
फ़ोन
768px पर ब्रेकप्वाइंट जोड़ने के लिए मीडिया क्वेरी का उपयोग करें:
उदाहरण
जब स्क्रीन (ब्राउज़र विंडो) 768px से छोटी हो जाती है, तो प्रत्येक कॉलम की चौड़ाई 100% होनी चाहिए:
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
हमेशा पहले मोबाइल के लिए डिज़ाइन करें
मोबाइल फर्स्ट का अर्थ है डेस्कटॉप या किसी अन्य डिवाइस के लिए डिजाइन करने से पहले मोबाइल के लिए डिजाइन करना (इससे पेज छोटे उपकरणों पर तेजी से प्रदर्शित होगा)।
इसका मतलब है कि हमें अपने CSS में कुछ बदलाव करने होंगे।
जब चौड़ाई 768px से कम हो जाती है, तो शैली बदलने के बजाय, जब चौड़ाई 768px से अधिक हो जाती है, तो हमें डिज़ाइन बदलना चाहिए । यह हमारे डिजाइन को मोबाइल फर्स्ट बना देगा:
उदाहरण
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
एक और ब्रेकप्वाइंट
आप जितने चाहें उतने ब्रेकप्वाइंट जोड़ सकते हैं।
हम टैबलेट और मोबाइल फोन के बीच एक ब्रेकप्वाइंट भी डालेंगे।
डेस्कटॉप
गोली
फ़ोन
हम एक और मीडिया क्वेरी (600px पर), और 600px से बड़े (लेकिन 768px से छोटे) डिवाइस के लिए नई कक्षाओं का एक सेट जोड़कर ऐसा करते हैं:
उदाहरण
ध्यान दें कि वर्गों के दो सेट लगभग समान हैं, केवल नाम ( col-और col-s-) का अंतर है:
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* For desktop: */
.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>
विशिष्ट डिवाइस ब्रेकप्वाइंट
विभिन्न ऊंचाई और चौड़ाई वाले टन स्क्रीन और डिवाइस हैं, इसलिए प्रत्येक डिवाइस के लिए सटीक ब्रेकपॉइंट बनाना मुश्किल है। चीजों को सरल रखने के लिए आप पांच समूहों को लक्षित कर सकते हैं:
उदाहरण
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
अभिविन्यास: पोर्ट्रेट / लैंडस्केप
मीडिया प्रश्नों का उपयोग ब्राउज़र के उन्मुखीकरण के आधार पर पृष्ठ के लेआउट को बदलने के लिए भी किया जा सकता है।
आपके पास सीएसएस गुणों का एक सेट हो सकता है जो केवल तभी लागू होगा जब ब्राउज़र विंडो इसकी ऊंचाई से अधिक चौड़ी हो, एक तथाकथित "लैंडस्केप" अभिविन्यास:
उदाहरण
यदि ओरिएंटेशन लैंडस्केप मोड में है तो वेब पेज की पृष्ठभूमि हल्की नीली होगी:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
मीडिया प्रश्नों के साथ तत्व छुपाएं
मीडिया प्रश्नों का एक अन्य सामान्य उपयोग, विभिन्न स्क्रीन आकारों पर तत्वों को छिपाना है:
उदाहरण
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
मीडिया प्रश्नों के साथ फ़ॉन्ट आकार बदलें
आप विभिन्न स्क्रीन आकारों पर किसी तत्व के फ़ॉन्ट आकार को बदलने के लिए मीडिया प्रश्नों का भी उपयोग कर सकते हैं:
परिवर्तनीय फ़ॉन्ट आकार।
उदाहरण
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
सीएसएस @मीडिया संदर्भ
सभी मीडिया प्रकारों और विशेषताओं/अभिव्यक्तियों के पूर्ण अवलोकन के लिए, कृपया हमारे सीएसएस संदर्भ में @मीडिया नियम देखें ।