CSS মিডিয়ার ধরন এবং ক্যোয়ারীগুলি ব্যবহারকারীকে ডিভাইসের সাধারণ ধরন (স্ক্রীন, প্রিন্ট, ইত্যাদি) বা এর বৈশিষ্ট্য (স্ক্রীন রেজোলিউশন, ভিউপোর্টের মাত্রা ইত্যাদি) অনুসারে নির্দিষ্ট শৈলী সংজ্ঞায়িত করতে সাহায্য করে।
সিনট্যাক্স
মিডিয়া প্রশ্নগুলির জন্য সিনট্যাক্স নিচে দেওয়া হল −
@media not | only mediatype and (expressions) {
CSS-Code;
} এখানে, মিডিয়া ক্যোয়ারী প্রয়োগ করা হয় যদি −
- মিডিয়াটাইপ ডিভাইসের প্রকারের সাথে মেলে যা নথিতে রেন্ডার করা হয়েছে।
- শুধুমাত্র অপারেটরগুলিকে সংজ্ঞায়িত করা হয় না তাহলে মিডিয়া কোয়েরি সমস্ত মিডিয়াটাইপের ক্ষেত্রে প্রযোজ্য৷
- না/শুধুমাত্র অপারেটর নির্দিষ্ট করা হয় তারপর মিডিয়া কোয়েরি যথাক্রমে নির্দিষ্ট মিডিয়াটাইপে প্রয়োগ করা হয় না।
একজন ব্যবহারকারীর আলাদা আলাদা মিডিয়ার সাথে সম্পর্কিত প্রতিটি স্টাইলশীট থাকতে পারে। উদাহরণস্বরূপ, একজন ব্যবহারকারীর প্রিন্ট এবং স্ক্রিন মিডিয়ার জন্য একটি ভিন্ন স্টাইলশীট থাকতে পারে।
<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">
এবং,
<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">
CSS3 −
-এ তালিকাভুক্ত মিডিয়ার ধরনগুলো নিচে দেওয়া হল| Sr. No | মান ও বর্ণনা |
|---|---|
| 1 | সমস্ত৷ স্টাইলশীট সমস্ত মিডিয়া ধরনের ডিভাইসে প্রযোজ্য |
| 2 | মুদ্রণ স্টাইলশীট প্রিন্টারে প্রযোজ্য |
| 3 | স্ক্রিন স্টাইলশীট কম্পিউটার স্ক্রীন, ট্যাবলেট, স্মার্ট ফোন ইত্যাদিতে প্রযোজ্য। |
| 4 | বক্তৃতা স্টাইলশীট স্ক্রিন রিডারদের জন্য প্রযোজ্য যেগুলি পৃষ্ঠাটিকে জোরে "পড়ে" |
মিডিয়া নির্ভরশীল স্টাইলশীট −
তৈরি করার পদ্ধতিগুলি নিম্নরূপ- @media At-রুল ব্যবহার করা হচ্ছে
- @import At-রুল ব্যবহার করা হচ্ছে
- মিডিয়া অ্যাট্রিবিউট সহ HTML উপাদান ব্যবহার করা
উদাহরণ
আসুন CSS মিডিয়া ক্যোয়ারী -
এর একটি উদাহরণ দেখি<!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 মিডিয়া ক্যোয়ারির আরেকটি উদাহরণ দেখি:HTML ডকুমেন্ট −
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>
CSS document (screen.css):
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; } আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন ডকুমেন্ট একটি স্ক্রীন মিডিয়াটাইপ −
এ দৃশ্যমান হয়
যখন নথি একটি প্রিন্ট মিডিয়াটাইপে দৃশ্যমান হয় −
