CSS মিডিয়া কোয়াইল

CSS2-এ মিডিয়া টাইপ প্রবর্তিত হয়েছে

CSS2-এ এটি প্রবর্তিত হয়েছে @media রুল, যা ভিন্ন মিডিয়া টাইপের জন্য ভিন্ন স্টাইল রুল নির্ধারণ করার সম্ভবতা প্রদান করে。

যেমন: আপনি কম্পিউটার স্ক্রিনের জন্য স্টাইল রুলস একটি গ্রুপ, প্রিন্টারের জন্য একটি গ্রুপ, হ্যান্ডহোল্ডার ডিভাইসের জন্য একটি গ্রুপ, এবং টেলিভিশনের জন্য একটি গ্রুপও থাকতে পারে, আরও বেশি।

দুর্ভাগ্যবশত, প্রিন্ট মিডিয়া টাইপ ছাড়া, এই মিডিয়া টাইপগুলি কখনও ডিভাইসের বিশাল সমর্থন পায়নি।

CSS3 মিডিয়া কোয়ারি প্রবর্তন করে

CSS3-এর মিডিয়া কোয়ারি সিএসএস2 মিডিয়া টাইপের ধারণা বিস্তারিত করে: তারা ডিভাইস টাইপকে অনুসন্ধান করে না, বরং ডিভাইসের সক্ষমতা নিয়ে বিবেচনা করে。

মিডিয়া কোয়ারি বহুবিধ কিছু পরীক্ষা করতে পারে, যেমন:

  • ভিউপোর্টের প্রস্থ এবং উচ্চতা
  • ডিভাইসের প্রস্থ এবং উচ্চতা
  • দিশা (ট্যাবলেট/স্মার্টফোন অন্তর্দীপক বা উপরোক্ত পদ্ধতিতে থাকে)
  • প্রদর্শন সমানুপাত

মিডিয়া কোয়ারি একটি জনপ্রিয় প্রযুক্তি, যা ডেস্কটপ, ল্যাপটপ, ট্যাবলেট এবং স্মার্টফোন (যেমন iPhone এবং Android স্মার্টফোন) ইত্যাদির জন্য কাস্টমাইজড সাইট স্টাইল প্রদান করতে পারে。

ব্রাউজার সমর্থন

টেবিলের সংখ্যা সম্পূর্ণভাবে সমর্থিত @media একক ব্রাউজারের প্রথম সংস্করণ

প্রতিভার
@media 21.0 9.0 3.5 4.0 9.0

মিডিয়া কোয়ারি গ্রামার

মিডিয়া কোয়ারি একটি মিডিয়া টাইপ নিয়ে গঠিত এবং একটি বা বেশি একককে অন্তর্ভুক্ত করতে পারে, যা true বা false হতে পারে。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

যদি নির্দিষ্ট মিডিয়া টাইপ এবং মিডিয়া কোয়ারিতে সমস্ত এক্সপ্রেশনগুলি true হয়, তবে মিডিয়া টাইপটি মাটি হবে।যখন মিডিয়া কোয়ারি true হয়, তখন প্রয়োগ করা হবে সংশ্লিষ্ট সাইট স্টাইল বা স্টাইল রুল, এবং সাধারণ ক্যানিস্লেশন রুল অনুসরণ করবে。

এছাড়াও, not বা only অপারেটর ব্যবহার করা না হলে, মিডিয়া টাইপ বাধ্যতামূলক নয় এবং অন্তর্নিহিত all টাইপ

আপনি আরও ভিন্ন মিডিয়ার জন্য ভিন্ন সাইট স্টাইল ব্যবহার করতে পারেন:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 মিডিয়া টাইপ

মূল্য বর্ণনা
all সমস্ত মিডিয়া টাইপ ডিভাইসের জন্য
print প্রিন্টারের জন্য
screen কম্পিউটার স্ক্রিন, ট্যাবলেট, স্মার্টফোন ইত্যাদি ব্যবহার করে
speech পেজকে বক্তৃতা করার জন্য ব্যবহৃত স্ক্রিন রিডার

মিডিয়া কোয়ারির একটি সরল উদাহরণ

মিডিয়া কোয়ারি একটি বিকল্প সাইট স্টাইল ব্যবহার করে একটি পদ্ধতি

এই উদাহরণটি, যদি ভিউপোর্টের চেপটি 480 পিক্সেল বা তার বেশি হয়, তবে ব্যাকগ্রাউন্ড কালারকে হালকা সবুজ রঙে রাখবে (যদি ভিউপোর্ট 480 পিক্সেল কম, তবে ব্যাকগ্রাউন্ড কালারকে লাল রঙ হবে):

উদাহরণ

@media screen and (min-width: 480পিক্সেল) {}
  body {
    background-color: lightgreen;
  }
}

আপনার হাতে নিন

এই উদাহরণে, একটি মেনু দেখানো হল, যদি ভিউপোর্টের চেপটি 480 পিক্সেল বা তার বেশি হয়, তবে এই মেনু পেজের বামপাশে ফ্লোট করবে (যদি ভিউপোর্ট 480 পিক্সেল কম, তবে এই মেনু কনটেন্টের শীর্ষে থাকবে):

উদাহরণ

@media screen and (min-width: 480পিক্সেল) {}
  #leftsidebar {পথ: 200পিক্সেল; ফ্লোট: লেফট;}
  #main {মার্গ-লেফট: 216পিক্সেল;}
}

আপনার হাতে নিন

আরও মিডিয়া কোয়াইল ইনস্ট্যান্স

আরও মিডিয়া কোয়াইল ইনস্ট্যান্স পাইতে, পরবর্তী পৃষ্ঠা দেখুন:CSS MQ ইনস্ট্যান্স。

CSS @media রেফারেন্স ম্যানুয়েল

সমস্ত মিডিয়া টাইপ, বৈশিষ্ট্য/প্রকাশনার পূর্ণ সংক্ষিপ্ত বর্ণনা জানতে, আমাদের CSS রেফারেন্সের @media রুল。