मीडिया क्वेरी का उपयोग तब किया जाता है जब आपको टैबलेट, मोबाइल, डेस्कटॉप आदि जैसे विभिन्न उपकरणों के लिए शैली सेट करने की आवश्यकता होती है।
आप मीडिया क्वेरी के साथ प्रतिक्रियाशील नेविगेशन मेनू बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं:
उदाहरण
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
.demo {
overflow: hidden;
background-color: blue;
}
.demo a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.demo a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<p>Navigation Menu:</p>
<div class = "demo">
<a href = "#">Home</a>
<a href = "#">About</a>
<a href = "#">Tutorials</a>
<a href = "#">QA</a>
<a href = "#">Videos</a>
<a href = "#">Contact</a>
</div>
</body>
</html>