আপনি যখন ট্যাবলেট, মোবাইল, ডেস্কটপ ইত্যাদির মতো বিভিন্ন ডিভাইসে একটি স্টাইল সেট করতে চান তখন মিডিয়া কোয়েরি ব্যবহার করা হয়।
আপনি মিডিয়া কোয়েরিগুলির সাথে একটি প্রতিক্রিয়াশীল নেভিগেশন মেনু তৈরি করতে নিম্নলিখিত কোড চালানোর চেষ্টা করতে পারেন:
উদাহরণ
<!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> 