सीएसएस में मीडिया क्वेरीज़ का परिचय

एक विशेष कमांड @media होती है, जो स्क्रीन की चौड़ाई के आधार पर अलग-अलग कोड निष्पादित करने की अनुमति देती है।

निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा जब स्क्रीन की चौड़ाई 300px से 1200px तक हो:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* कुछ कोड */
}

निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा जब स्क्रीन की चौड़ाई 300px से अधिक हो:

css@media (min-width: 300px) {
  /* कुछ कोड */
}

निम्नलिखित उदाहरण में, कुछ कोड तब काम करेगा जब स्क्रीन की चौड़ाई 1200px से कम हो:

css@media (max-width: 1200px) {
  /* कुछ कोड */
}

आइए हम अपनी मीडिया क्वेरी में कोई कोड लिखें। उदाहरण के लिए, स्क्रीन के certain आकारों पर पैराग्राफ़ का रंग लाल कर दें:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

और अब स्क्रीन की चौड़ाई के आधार पर पैराग्राफ़ों को various रंगों में रंग दें:

css@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;
  }
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}

cssp {
  font-size: 15px;
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}