सीएसएस में मीडिया क्वेरीज़ का परिचय
एक विशेष कमांड @media होती है,
जो स्क्रीन की चौड़ाई के आधार पर
अलग-अलग कोड निष्पादित करने की अनुमति देती है।
निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा
जब स्क्रीन की चौड़ाई 300px से
1200px तक हो:
@media (min-width: 300px) and (max-width: 1200px) {
/* कुछ कोड */
}
निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा
जब स्क्रीन की चौड़ाई 300px से अधिक हो:
@media (min-width: 300px) {
/* कुछ कोड */
}
निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा
जब स्क्रीन की चौड़ाई 1200px से कम हो:
@media (max-width: 1200px) {
/* कुछ कोड */
}
आइए हम अपनी मीडिया क्वेरी में कोई कोड लिखें। उदाहरण के लिए, स्क्रीन के certain आकारों पर पैराग्राफ़ का रंग लाल कर दें:
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
और अब स्क्रीन की चौड़ाई के आधार पर पैराग्राफ़ों को various रंगों में रंग दें:
@media (max-width: 300px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 900px) {
p {
color: green;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
p {
color: blue;
}
}
@media (min-width: 1200px) {
p {
color: orange;
}
}
मान लीजिए कि निम्नलिखित कोड
0 से 800px तक की चौड़ाई वाली स्क्रीन पर लागू हो:
p {
font-size: 20px;
}
और निम्नलिखित कोड 800px और अधिक चौड़ाई वाली स्क्रीन पर लागू हो:
p {
font-size: 30px;
}
मान लीजिए कि निम्नलिखित कोड
0 से 500px तक की चौड़ाई वाली स्क्रीन पर लागू हो:
p {
font-size: 15px;
}
निम्नलिखित कोड 500px से 900px तक की चौड़ाई वाली स्क्रीन पर लागू हो:
p {
font-size: 20px;
}
निम्नलिखित कोड 900px और अधिक चौड़ाई वाली स्क्रीन पर लागू हो:
p {
font-size: 30px;
}