সিএসএস(৩) @media Rule
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| @media | ২১.০ | ৯.০ | ৩.৫ | ৪.০ | ৯.০ |
সংজ্ঞা ও ব্যবহার
বিভিন্ন মিডিয়া ধরন/ডিভাইসের জন্য বিভিন্ন স্টাইল ব্যবহার করতে @media Rule ব্যবহার করা হয়।
সিএসএস(২)-এ একে মিডিয়া ধরন বলা হতো, কিন্তু সিএসএস(৩)-তে এটাকে মিডিয়া কুয়েরি বলা হয়।
মিডিয়া কুয়েরি ডিভাইসের ক্ষমতা দেখে, এবং অনেক কিছু চেক করার জন্য ব্যবহার করা যেতে পারে, যেমন:
- ভিউপোর্টএর প্রস্থ এবং উচ্চতা
- ডিভাইসের প্রস্থ এবং উচ্চতা
- অরিয়েন্টেশন ( ট্যাবলেট/ফোনটি কি আড়াআড়ি বা লম্বালম্বি অবস্থায় আছে?)
- পূনঃসমাধান
- এবং আরো অনেক কিছু
সিএসএস সিনট্যাক্স
@media not/only mediatype and (media feature) {
CSS-Code;
}
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস @media Rule রেফারেন্স উদাহরণ</title>
<style>
body {
background-color: lightblue;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1> browser window এর আকার পরিবর্তন করে প্রভাব দেখুন !</h1>
<p> মিডিয়ার স্ক্রীন এবং ভিউপোর্টের ধরণ যদি 480 পিক্সেল চওড়া বা ব্যাপকতর হয় তাহলে মিডিয়া কুয়েরিতে প্রয়োগ করা যাবে। </p>
</body>
</html>
ফলাফল
ভিন্ন মিডিয়ার জন্য ভিন্ন ধরনের stylesheet ব্যবহার করতে পারেন যেমন:-
<link rel="stylesheet" media="mediatype and/not/only (media feature)"href="mystylesheet.css
রেস্পন্সিভ ডিজাইন তৈরি করার জন্য @media rule এর ব্যবহার:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস @media Rule রেফারেন্স উদাহরণ</title>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
width: 100%;
}
h1{
font-size: 1.625em;
}
h2{
font-size: 1.375em;
}
.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.0661157024793388429752066115702%;
}
.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}
.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.481781376518218623481781376518%;
}
.gridmain {
width: 48.987854251012145748987854251012%;
}
.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
@media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1.0121457489878542510121457489879%;
}
.gridright {
width: 100%;
}
.right {
padding: 1.0121457489878542510121457489879%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>অন্য রকম ঘুরাঘুরি</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">ড্রাইভিং</div>
<div class="menuitem"> হাটাহাটি</div>
<div class="menuitem">ফিরে আসা</div>
<div class="menuitem"> সমাপ্ত</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>নীলগিরি</h1>
<p> নীলগিরি পর্যটন কেন্দ্র। বাংলাদেশের বান্দরবান জেলায় নীলগিরি পাহাড়চূড়ায় অবস্থিত একটি জনপ্রিয় পর্যটন কেন্দ্র।
সমুদ্রপৃষ্ঠ থেকে ২২০০ ফুট উচ্চে অবস্থানের কারণে নীলগিরি পর্যটন কেন্দ্র সর্বদা মেঘমণ্ডিত আর এটাই এই পর্যটন কেন্দ্রের বিশেষ আকর্ষণ। </p>
<img src="../cssref_examples/nilgiri.jpg" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>কীভাবে যাবেনঃ</h2>
<p>চট্টগ্রামের বহদ্দারহাট থেকে পূরবী-পূর্বানী ননএসি এবং কদমতলি থেকে বিআরটি এসি বাস সার্ভিস চালু রয়েছে বান্দরবান।</p>
<h2>কোথায় থাকবেনঃ</h2>
<p>বান্দরবানে অসংখ্য রিসোর্ট, হোটেল, মোটল এবং রেস্টহাউজ রয়েছে।</p>
<h2>কটেজ সংক্রান্ত তথ্যঃ</h2>
<p>সেনানিয়ন্ত্রিত নীলগিরি রিসোর্টে ছয়টি কটেজ রয়েছে।</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
</div>
</div>
</div>
</div>
</body>
</html>
ফলাফল
media types প্রোপার্টির ভ্যালু-সমূহ
- all - সকল মিডিয়া টাইপ ডিভাইসের জন্য ব্যবহার করা হয় ।
- aural - অননুমোদিত। বক্তৃতা এবং সাউন্ড সমন্বয়কারীদের জন্য ব্যবহার করা হয়।
- braille - অননুমোদিত। ব্রেইল স্পর্শিয় প্রতিক্রিয়া ডিভাইসের জন্য ব্যবহার করা হয়।
- embossed - অননুমোদিত। পেইজ ব্রেইল প্রিন্টারের জন্য ব্যবহার করা হয় ।
- handheld - অননুমোদিত। ছোট বা হ্যান্ডহোল্ড ডিভাইসের জন্য ব্যবহার করা হয়।
- print - প্রিন্টারের জন্য ব্যবহার করা হয়।
- projection - অননুমোদিত। প্রোজেক্ট উপস্থাপনার জন্য ব্যবহার করা হয় যেমনঃ স্লাইড।
- screen -কম্পিউটার স্ক্রিন, ট্যাবলেট, স্মার্টফোন ইত্যাদির জন্য ব্যবহার করা হয়।
- speech - স্ক্রিনরিডারদের জন্য ব্যবহার করা হয় যেটি উচ্চস্বরে পেজটি "পড়ে" ।
- tty - অননুমোদিত। টেলিটাইপ এবং টার্মিনাল মিডিয়ার মত একটি fixed-pitch অক্ষর গ্রিড ব্যবহার করতে ব্যবহার করা হয়।
- tv - অননুমোদিত। টেলিভিশন-ধরনের ডিভাইসের জন্য ব্যবহার করা হয়।
media features প্রোপার্টির ভ্যালু-সমূহ
- aspect-ratio - ভিউপোর্টের প্রস্থ এবং উচ্চতার মধ্যে অনুপাত নির্দেশ করে।
- color - আউটপুট ডিভাইসের কালার কম্পোনেন্টের জন্য একটি সংখ্যক বিট নির্দেশ করে।
- color-index -ডিভাইস যতোগুলো কালার প্রদর্শন করতে সক্ষম তার সংখ্যাকে নির্দেশ করে।
- device-aspect-ratio - ডিভাইসের প্রস্থ এবং উচ্চতার অনুপাত নির্দেশ করে।
- device-height -কম্পিউটার স্ক্রিনের মত ডিভাইসের উচ্চতা নির্দেশ করে।
- device-width - কম্পিউটার স্ক্রিনের মত ডিভাইসের প্রস্থ নির্দেশ করে।
- grid -ডিভাইসটি গ্রিড নাকি বিটম্যাপ তা নির্দেশ করে।
- height - ভিউপোর্টের উচ্চতা বুঝায়।
- max-aspect-ratio -ডিসপ্লে এরিয়ার প্রস্থ্ এবং উচ্চতার সর্বোচ্চ অনুপাত নির্দেশে করে।
- max-color - আউটপুট ডিভাইসের কালার কম্পোনেন্টের জন্য সর্বোচ্চ সংখ্যক বিটকে নির্দেশ করে।
- max-color-index - ডিভাইস সর্বোচ্চ সংখ্যক কালারকে বুঝায় যা একটি ডিভাইস প্রদর্শন করতে সক্ষম।
- max-device-aspect-ratio - ডিভাইস সর্বোচ্চ প্রস্থ এবং উচ্চতার সর্বোচ্চ অনুপাত নির্দেশ করে।
- max-device-height - কম্পিউটার স্ক্রিনের মত ডিভাইসের সর্বোচ্চ উচ্চতা নির্দেশ করে।
- max-device-width - কম্পিউটার স্ক্রিনের মত ডিভাইসের সর্বোচ্চ প্রস্থ নির্দেশ করে।
- max-height - ব্রাউজার উইন্ডোর মত ডিভাইসের সর্বোচ্চ রেজুলেশনের উচ্চতা নির্দেশ করে।
- max-monochrome -একটি monochrome (greyscale) ডিভাইসের জন্য কালারের সর্বোচ্চ সংখ্যক বিট নির্দেশ করে।
- max-resolution -dpi বা dpcm ব্যবহার করে ডিভাইসের সর্বোচ্চ রেজুলেশনকে নির্দেশ করে।
- max-width -ব্রাউজার উইন্ডোর মত ডিভাইসের সর্বোচ্চ রেজুলেশনের প্রস্থ্ নির্দেশ করে।
- min-aspect-ratio - ডিসপ্লে এরিয়ার দৈর্ঘ্য এবং প্রস্থের সর্বনিম্ন অনুপাত নির্দেশ করে।
- min-color - আউটপুট ডিভাইস প্রতিটি কালারে সর্বনিম্ন সংখ্যক বিটকে প্রদর্শন করে।
- min-color-index - ডিভাইস সর্বনিম্ন কতো সংখ্যক কালার বিট প্রদর্শন করতে সক্ষম তা নির্দেশ করে।
- min-device-aspect-ratio - ডিভাইস সর্বনিম্ন প্রস্থ এবং উচ্চতার অনুপাত নির্দেশ করে।
- min-device-width -কম্পিউটার স্ক্রিনের মত ডিভাইসের সর্বনিম্ন প্রস্থ নির্দেশ করে।
- min-device-height -কম্পিউটার স্ক্রিনের মত ডিভাইসের সর্বনিম্ন উচতা নির্দেশ করে।
- min-height -ব্রাউজার উইন্ডোর মত ডিভাইসের সর্বনিম্ন উচ্চতা নির্দেশ করে।
- min-monochrome -একটি monochrome (greyscale) ডিভাইসের জন্য কালারের সর্বনিম্ন সংখ্যক বিটকে নির্দেশ করে।
- min-resolution - dpi বা dpcm ব্যবহার করে ডিভাইসের সর্বনিম্ন রেজুলেশনকে নির্দেশ করে।
- min-width - ব্রাউজার উইন্ডোর মত ডিসপ্লে এরিয়ার সর্বনিম্ন প্রস্থ নির্দেশ করে।
- monochrome -একটি monochrome (greyscale) ডিভাইসের জন্য কালারের বিট সংখ্যা নির্দেশ করে।
- orientation -ভিউপোর্টের স্থিতিবিন্যাসকে নির্দেশ করে(আড়াআড়ি বা লম্বালম্বি ভাবে)
- overflow-block -আউটপুট ডিভাইস কিভাবে কন্টেন্টকে হ্যান্ডেল করে যেটি ভিউপোর্ট ব্লক অক্ষ বরাবর ওভারপ্লো করে (মিডিয়া কুয়েরি লেভেল ৪ এ যোগ করা হয়েছে) তা নির্দেশ করে।
- overflow-inline - কন্টেন্ট ভিউপোর্ট ব্লক অক্ষ বরাবর ওভারপ্লো করে (মিডিয়া কুয়েরি লেভেল ৪ এ যোগ করা হয়েছে) তা নির্দেশ করে।
- resolution -dpi বা dpcm ব্যবহার করে আউটপুট ডিভাইসের রেজুলেশন নির্দেশ করে।
- scan -আউটপুট ডিভাইস এর স্ক্যানিং প্রক্রিয়াকে নির্দেশ করে।
- update-frequency -কতো দ্রুত আউটপুট ডিভাইস কন্টেন্টকে modify করতে পারে (মিডিয়া কুয়েরি লেভেল ৪ এ যোগ করা হয়েছে) তা নির্দেশ করে।
- width -ভিউপোর্ট এর প্রস্থকে নির্দেশ করে।