CSS @media নিয়মটি একটি একক স্টাইল শীটে বিভিন্ন মিডিয়া প্রকারের (যেমন প্রিন্ট, স্ক্রিন, সব, ইত্যাদি) জন্য বিভিন্ন শৈলী নির্দিষ্ট করতে ব্যবহৃত হয়। এটি সাধারণত মিডিয়া প্রকারের একটি কমা দ্বারা পৃথক করা তালিকা এবং টার্গেট মিডিয়ার শৈলীর নিয়ম সমন্বিত 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-
এর নিচে হয়
