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

एक विशेष कमांड @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;
}