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