CSS मीडिया क्वेरी - उदाहरण
- पिछला पृष्ठ CSS मीडिया क्वेरी
- अगला पृष्ठ RWD सारांश
CSS मीडिया क्वेरी - अधिक उदाहरण
हम एक और उदाहरण को देखें।
मीडिया क्वेरी एक लोकप्रिय तकनीक है, जो विभिन्न डिवाइस के लिए कस्टम स्टाइल शीट भेजने के लिए उपयोग की जाती है।
नीचे एक साधारण उदाहरण दिखाया गया है, जिससे हम विभिन्न डिवाइस के बैकग्राउंड कोलर को बदलें:
उदाहरण
/* बॉडी के बैकग्राउंड कोलर को तान का रंग में सेट करें */
body {
background-color: tan;
}
/* 992 पिक्सल या कम आकार के स्क्रीन पर, बैकग्राउंड कोलर को नीला रंग में सेट करें */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 600 पिक्सल या कम आकार के स्क्रीन पर, बैकग्राउंड कोलर को ओलिव रंग में सेट करें */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
आप जानना चाहते हैं कि हम क्यों 992px और 600px का सटीक उपयोग करते हैं? वे हमारे लिए 'टिपिकल ब्रेकपाइंट' (typical breakpoints) हैं। आप हमारे रिस्पोंसिव वेब डिजाइन ट्यूटोरियल अध्ययन करके टिपिकल ब्रेकपाइंट के बारे में अधिक जानकारी प्राप्त करें।
मेनू के मीडिया क्वेरी
इस उदाहरण में, हमने मीडिया क्वेरी का उपयोग करके रिस्पोंसिव नेविगेशन मेनू बनाया है, जो विभिन्न स्क्रीन आकारों पर अलग-अलग होता है。
उदाहरण
/* navbar कंटेनर */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar लिंक */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 600 पिक्सल या कम चौड़ाई पर मेनू लिंक को एक दूसरे के बगल में स्टैक करें, न कि पैरालेल */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
स्तम्भ के मीडिया क्वेरी
मीडिया क्वेरी का एक आम उपयोग फ्लेक्स लेयउट का निर्माण करना है। इस उदाहरण में, हमने एक लेयउट बनाई है, जो चार स्तम्भ, दो स्तम्भ और पूर्ण चौड़ाई स्तम्भ के बीच बदलती है, जो विभिन्न स्क्रीन आकारों के अनुसार है:
बड़े स्क्रीन:
मध्यम स्क्रीन:
सूक्ष्म स्क्रीन:
उदाहरण
/* एक दूसरे के बगल में फ्लॉट करने वाले चार समान स्तम्भ बनाएं */
.column {
float: left;
width: 25%;
}
/* 992px या कम चौड़ाई पर चार स्तम्भ से दो स्तम्भ में बदलें */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* चौड़ाई 600 पिक्सल या कम होने पर सभी स्तम्भ को ठीक से स्टैक करें, न कि पैरालेल */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
इंगिता:सबसे आधुनिक बॉक्स लेयउट बनाने की विधि CSS Flexbox का उपयोग करना है (नीचे के उदाहरण को देखें)। लेकिन, इंटरनेट एक्सप्लोरर 10 और अधिक पुरानी संस्करण इसको समर्थित नहीं करते। अगर आपको IE6-10 के समर्थन की आवश्यकता है, तो फ्लॉट का उपयोग करें (ऊपर के तरीके के अनुसार)।
यदि आप फ्लेक्स बॉक्स लेयउट मॉड्यूल के बारे में अधिक जानना चाहते हैं, तो CSS फ्लेक्सबॉक्स इस चैप्टर को पढ़ें।
यदि आप रिस्पोंसिव वेब डिजाइन के बारे में अधिक जानना चाहते हैं, तो हमारे रिस्पोंसिव वेब डिजाइन ट्यूटोरियल。
उदाहरण
/* फ्लेक्स बॉक्स के कंटेनर */
.row {
display: flex;
flex-wrap: wrap;
}
/* चार समान स्तम्भ बनाएं */
.column {
flex: 25%;
padding: 20px;
}
/* 992px या कम चौड़ाई पर चार स्तम्भ से दो स्तम्भ में बदलें */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* चौड़ाई 600 पिक्सल या कम होने पर सभी स्तम्भ को ठीक से स्टैक करें, न कि पैरालेल */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
मीडिया क्वेरी से एलिमेंट्स को छुपाना
मीडिया क्वेरी का एक आम उपयोग विभिन्न स्क्रीन आकारों पर एलिमेंट्स को छुपाना है:
छोटे स्क्रीन पर मैं छुपा दूंगा。
उदाहरण
/* यदि स्क्रीन आकार 600 पिक्सल या उससे कम हो, इस एलिमेंट को छुपाएं */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
मीडिया क्वेरी से फ़ॉन्ट साइज़ बदलना
विभिन्न स्क्रीन आकारों पर एलिमेंट के फ़ॉन्ट साइज़ को बदलने के लिए मीडिया क्वेरी का उपयोग करें:
फ़ॉन्ट साइज़ की परिवर्तनीयता
उदाहरण
/* यदि स्क्रीन आकार 600 पिक्सल से अधिक हो, <div> के फ़ॉन्ट साइज़ को 80 पिक्सल करें */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* यदि स्क्रीन आकार 600px या उससे कम हो, <div> के फ़ॉन्ट साइज़ को 30px करें */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
अनुकूली फोटोग्राफी लाइब्रेरी
इस उदाहरण में, हम मीडिया क्वेरी को flexbox के साथ उपयोग करके प्रतिसादी फोटोग्राफी लाइब्रेरी को बनाते हैं:
उदाहरण
अनुकूली वेबसाइट
इस उदाहरण में, हम मीडिया क्वेरी को flexbox के साथ उपयोग करके प्रतिसादी वेबसाइट को बनाते हैं जो अनुकूली नेविगेशन और अनुकूली सामग्री को शामिल करती है।
उदाहरण
दिशा: मानव / वनस्पति
मीडिया क्वेरी ब्राउज़र की दिशा के अनुसार पृष्ठ के रूपांतरण के लिए भी उपयोग की जा सकती हैं。
आप केवल ब्राउज़र विंडो की चौड़ाई उसकी ऊंचाई से बड़ी होने पर लागू होने वाले एक समूह CSS गुणसूत्र सेट कर सकते हैं, जिसे कि केवल अड़ावा मोड कहा जाता है:
उदाहरण
यदि दिशा अड़ावा मोड में है, तो हल्की नीले पृष्ठभूमि रंग का उपयोग करें:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
न्यूनतम चौड़ाई से अधिकतम चौड़ाई
आप अधिकतम चौड़ाई और न्यूनतम चौड़ाई गुणसूत्रों को उपयोग करके न्यूनतम और अधिकतम चौड़ाई सेट कर सकते हैं。
उदाहरण के तौर पर, जब ब्राउज़र की चौड़ाई 600 से 900 पिक्सल तक हो तो <div> एलिमेंट की उपस्थिति को बदलें:
उदाहरण
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
अतिरिक्त मीडिया क्वेरी जोड़ने के लिए अतिरिक्त मान उपयोग करना: नीचे के उदाहरण में, हमने दूसरे मीडिया क्वेरी को जोड़ने के लिए बिंदु का प्रयोग किया (जैसा कि OR ऑपरेटर के समान):
उदाहरण
/* जब चौड़ाई 600 पिक्सल से 900 पिक्सल तक हो या 1100 पिक्सल से अधिक हो तो - <div> की उपस्थिति को बदलें */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media संदर्भ दस्तावेज
सभी मीडिया टाइपों और विशेषताओं/अभिव्यक्तियों के पूर्ण समीक्षा के लिए देखें CSS संदर्भ में @media नियम。
इंगिता:रिस्पोंसिव वेब डिजाइन (विभिन्न डिवाइसों और स्क्रीनों के लिए) के बारे में और आपके लिए मीडिया क्वेरी ब्रेकपाइंट का अधिक ज्ञान प्राप्त करने के लिए, हमारे रिस्पोंसिव वेब डिजाइन ट्यूटोरियल。
- पिछला पृष्ठ CSS मीडिया क्वेरी
- अगला पृष्ठ RWD सारांश
