CSS @media রুল একটি সিঙ্গল স্টাইলশীতে ভিন্ন মিডিয়া টাইপের (যেমন print, screen, all ইত্যাদি) জন্য ভিন্ন স্টাইলস স্পেসিফাই করতে ব্যবহৃত হয়। এটি সাধারণত একটি কমা-সেপারেটেড মিডিয়া টাইপের লিস্ট এবং টার্গেট মিডিয়ার জন্য স্টাইল রুলস সম্বলিত CSS ডিক্লেরেশন ব্লক দ্বারা ফলো করা হয়।
সিনট্যাক্স
সিনট্যাক্স নিম্নরূপ:
@media not | only mediatype and (expressions) { CSS-Code; }
উদাহরণ
CSS @media রুলের একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .col { float: left; width: 20%; padding: 40px; } body { background-color: lemonchiffon; margin: 20px; } @media screen and (max-width: 850px) { .col { width: 50%; } body { background-color: mediumseagreen; } } @media screen and (max-width: 550px) { .col { width: 100%; } body { background-color: powderblue; } } </style> </head> <body> <div class="row"> <div class="col" style="background-color:#373;"> </div> <div class="col" style="background-color:#363;"> </div> <div class="col" style="background-color:#353;"> </div> <div class="col" style="background-color:#343;"> </div> <div class="col" style="background-color:#333;"> </div> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
যখন স্ক্রিন সাইজ 850px এর উপরে:
যখন স্ক্রিন সাইজ 550px এবং 850px এর মাঝপথে:
যখন স্ক্রিন সাইজ 550px এর নিচে:
আরেকটি উদাহরণ
CSS @media রুলের আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <style type="text/css"> p { background-origin: content-box; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 3px black; padding: 20px; background-origin: border-box; } @media screen and (max-width: 900px) { p{ background: url("https://www.tutorialspoint.com/swing/images/swing.jpg"); color: #c303c3; } } @media screen and (max-width: 500px) { p { color: black; background: url("https://www.tutorialspoint.com/cplusplus/images/cplusplus.jpg"); } } </style> </head> <body> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
যখন স্ক্রিন সাইজ 500px এর উপরে:
যখন স্ক্রিন সাইজ 500px এর নিচে:
