CSS @media নিয়ম

  • পূর্ববর্তী পৃষ্ঠা max-width
  • পরবর্তী পৃষ্ঠা min-block-size

পরিভাষা এবং ব্যবহার

@media নিয়মটি মুদ্রা কোয়াইলের মধ্যে ব্যবহৃত হয়, যাতে বিভিন্ন মিডিয়া ধরন / ডিভাইসের জন্য ভিন্ন শৈলী প্রয়োগ করা যায়。

মুদ্রা কোয়াইল ব্যবহার করে বহু কিছু পরীক্ষা করা যায়, যেমন:

  • ভিউপোর্টের প্রস্থ এবং উচ্চতা
  • ডিভাইসের প্রস্থ এবং উচ্চতা
  • দিশা (মোবাইল বা ট্যাবলেট পার্শ্বভাগ বা লম্বা প্রদর্শন মোড?)
  • রেজলিউশন

মুদ্রা কোয়াইল ব্যবহার করা একটি প্রচলিত প্রযুক্তি, যা ডেস্কটপ, ল্যাপটপ, ট্যাবলেট এবং মোবাইল ফোনের জন্য অভিন্ন শৈলীসূচী প্রদান করে (রেসপনসিভ ওয়েব ডিজাইন)。

আপনি মুদ্রা কোয়াইল ব্যবহার করে কোনও নির্দিষ্ট শৈলীকে শুধুমাত্র প্রিন্ট ডকুমেন্ট বা স্ক্রিন রিডার এর জন্য নির্দিষ্ট করতে পারেন (mediatype: print, screen বা speech)。

মিডিয়া ধরনের পাশাপাশি, মিডিয়া বৈশিষ্ট্যও আছে। মিডিয়া বৈশিষ্ট্যগুলি মিডিয়া কোয়াইয়ার জন্য আরও বিস্তৃত বিবরণ প্রদান করে, যেমন উপযুক্ত ইউজার অ্যাগেন্ট বা ডিসপ্লে ডিভাইসের বিভিন্ন বৈশিষ্ট্য পরীক্ষা করতে দেয়। উদাহরণস্বরূপ, আপনি শুধুমাত্র একটি নির্দিষ্ট প্রশস্ততার বেশি বা কম স্ক্রিনের জন্য স্টাইল প্রয়োগ করতে পারেন।

আরও দেখুন:

CSS শিক্ষাদত্ত্রCSS মিডিয়া কোয়ারি

CSS শিক্ষাদত্ত্রCSS মিডিয়া কোয়াইয়ার উদাহরণ

RWD শিক্ষাদত্ত্রমিডিয়া কোয়াইয়ার মাধ্যমে প্রতিক্রিয় ওয়েব ডিজাইন করা

JavaScript পরিচ্ছন্নকরণwindow.matchMedia() পদ্ধতি

উদাহরণ

উদাহরণ 1

যদি ব্রাউজার উইন্ডোর প্রশস্ততা 600px বা তার কম, তবে <body> ইলিমেন্টের ব্যাকগ্রাউন্ড রঙকে 'সুবাদ ব্লু' করে রাখুন

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

আপনার নিজেই প্রয়োগ করুন

আরও TIY উদাহরণগুলি পাতার নিচে পাবেন

CSS য়াক্তিকা

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

not, only এবং and কীভূত্তপূর্বক কীভাবে কাজ করে:

not: not কীভূত্তপূর্বক সমগ্র মিডিয়া কোয়াইয়ার অর্থকে পরিবর্তন করে

only: only কীভূত্তপূর্বক পুরানো ব্রাউজারগুলিতে নির্দিষ্ট স্টাইলকে প্রয়োগ করে না, যেগুলি মিডিয়া বৈশিষ্ট্যসহ মিডিয়া কোয়াইয়ার সহ সমর্থন করে না। এটি আধুনিক ব্রাউজারগুলিতে কোনও প্রভাব প্রয়োগ করে না

and: and কীভূত্তপূর্বক মিডিয়া বৈশিষ্ট্যকে মিডিয়া ধরন বা অন্য মিডিয়া বৈশিষ্ট্যসহ মিশ্রণ করে

তারা সবই অপশনাল। কিন্তু, not বা only ব্যবহার করলে, মিডিয়া ধরনকেও নির্দিষ্ট করতে হবে。

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

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

মিডিয়া ধরন

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

মিডিয়া বৈশিষ্ট্য

মান বর্ণনা
any-hover

কোনও উপযুক্ত ইনপুট মেকানিজম আছে কি যা ব্যবহারকারীকে (মাউস ইত্যাদি) এলিমেন্টের উপর অবস্থান করতে দেবে?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
any-pointer

কোনও পোইন্টার ডিভাইস আছে কি? আছলে, তার প্রাকৃতিকতা কত? কোনও উপযুক্ত ইনপুট মেকানিজম আছে কি যা ব্যবহারকারীকে (মাউস ইত্যাদি) এলিমেন্টের উপর অবস্থান করতে দেবে?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
aspect-ratio ভিউপোর্ট (viewport) এর প্রস্থ এবং উচ্চতা মধ্যের অনুপাত
color

আউটপুট ডিভাইস প্রত্যেক পিক্সেলের বিট মান, যেমন 8, 16, 32 বিট

যদি ডিভাইস রঙ আউটপুট করতে পারে না, তবে এই মান 0 হবে。
color-gamut

ইউজার অ্যাগেন্ট এবং আউটপুট ডিভাইস সম্পর্কে সাধারণভাবে সমর্থিত রঙ গ্যামাট

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
color-index

আউটপুট ডিভাইসের একবর্ণ লুকআপ টেবিল (color lookup table) এর এন্ট্রি সংখ্যা

যদি ডিভাইস একবর্ণ কোরিং টেবিল ব্যবহার করে না, তবে এই মান 0 হবে。
device-aspect-ratio

আউটপুট ডিভাইসের প্রস্থ এবং উচ্চতা মধ্যের অনুপাত

মিডিয়া কোয়াইয়ার্স লেভেল 4-এ বর্জিত
device-height

আউটপুট ডিভাইস রেন্ডারিং সুপারফিস (যেমন স্ক্রিন) এর উচ্চতা

মিডিয়া কোয়াইয়ার্স লেভেল 4-এ বর্জিত
device-width

আউটপুট ডিভাইস রেন্ডারিং সুপারফিস (যেমন স্ক্রিন) এর প্রস্থ

মিডিয়া কোয়াইয়ার্স লেভেল 4-এ বর্জিত
display-mode

অ্যাপ্লিকেশনের প্রদর্শন মোড, যেমন web app এর manifest এর display সদস্য দ্বারা নির্ধারিত

ওয়েব অ্যাপ ম্যানিফেস্ট স্পেসিফিকেশন এর মধ্যে নির্ধারিত
forced-colors

ইউজার অ্যাগেন্ট কি প্যালেটকে নিয়ন্ত্রণ করে?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
grid আউটপুট ডিভাইস গ্রিড স্ক্রিন বা পয়েন্ট ম্যাট্রিক্স স্ক্রিন ব্যবহার করছে?
height ভিউপোর্ট (viewport) এর উচ্চতা
hover

প্রধান ইনপুট মেকানিজম কি ব্যবহারকারীকে এলিমেন্টের ওপর মাউস হভার করতে অনুমতি দেয়?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
inverted-colors

ব্রাউজার বা নিম্নস্তরীয় অপারেটিং সিস্টেম একবর্ণকে পরিবর্তন করেছে কি?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
light-level

বর্তমান আলোর পর্যায়

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
max-aspect-ratio প্রদর্শন অঞ্চলের প্রস্থ এবং উচ্চতা মধ্যের সর্বোচ্চ অনুপাত。
max-color আউটপুট ডিভাইসের প্রত্যেক একবর্ণ কম্পোনেন্টের সর্বোচ্চ বিন্যাসের সংখ্যা。
max-color-index ডিভাইস প্রদর্শন করতে পারে একবর্ণের সর্বোচ্চ সংখ্যা。
max-height প্রদর্শন অঞ্চলের সর্বোচ্চ উচ্চতা, যেমন ব্রাউজার উইন্ডো。
max-monochrome একবর্ণীয় (গ্রেস্কেল) ডিভাইসের প্রত্যেক 'একবর্ণ' এর সর্বোচ্চ বিন্যাসের সংখ্যা。
max-resolution ডিভাইসের সর্বোচ্চ রেজলিউশন, dpi বা dpcm এর মাধ্যমে ব্যবহার করা হয়。
max-width প্রদর্শন অঞ্চলের সর্বোচ্চ প্রস্থ, যেমন ব্রাউজার উইন্ডো。
min-aspect-ratio প্রদর্শন অঞ্চলের প্রস্থ এবং উচ্চতা মধ্যের সর্বনিম্ন অনুপাত。
min-color আউটপুট ডিভাইসের প্রত্যেক একবর্ণ কম্পোনেন্টের সর্বনিম্ন বিন্যাসের সংখ্যা。
min-color-index ডিভাইস প্রদর্শন করতে পারে একবর্ণের সর্বোচ্চ সংখ্যা。
min-height প্রদর্শন অঞ্চলের সর্বনিম্ন উচ্চতা, যেমন ব্রাউজার উইন্ডো。
min-monochrome একটি একবর্ণীয় (গ্রেস্কেল) ডিভাইসের প্রত্যেক 'একবর্ণ' এর সর্বনিম্ন বিন্যাসের সংখ্যা。
min-resolution resolution
ডিভাইসের ন্যূনতম রেজলিউশন, dpi বা dpcm-এর মাধ্যমে ব্যবহার করা হয়。 min-width
প্রদর্শন ক্ষেত্রের ন্যূনতম প্রস্থতা, যেমন ব্রাউজার উইন্ডো。

monochrome

যদি ডিভাইস সুপারিশ না করে, তবে এই মান 0 হবে。
orientation ভিউপোর্ট (viewport) এর ঘুর্ণান্ত দিশা (লম্বার বা অলঙ্কৃত মোডে)。
overflow-block

আউটপুট ডিভাইস কিভাবে ব্লক অক্সপ্রোফলের কনটেন্টকে সরবরাহিত করবে?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
overflow-inline

ভিউপোর্ট (viewport) এর মধ্যে ইনলাইন অক্সপ্রোফলের কনটেন্টটি সরবরাহিত করা হবে কি?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
pointer

প্রধান ইনপুট মেকানিজম একটি পোইন্টার ডিভাইস কি? এইকরে, তার নিঃশব্দতা কিভাবে?

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
prefers-color-scheme

ব্যবহারকারী উজ্জ্বল বা অন্ধক রঙগুলির কম্বিনেশনকে পছন্দ করেন কি?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
prefers-contrast

ব্যবহারকারী কিনা সিস্টেমে পরিবর্তিত করতে চান, প্রায় একই রঙের মধ্যে কনট্রাস্ট বাড়াতে কিংবা কমাতে?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
prefers-reduced-motion

ব্যবহারকারী পাতায় কম ডাইনামিক ইফেক্টস দেখতে চান কি?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
prefers-reduced-transparency

ব্যবহারকারী কমপ্লেক্সতর স্পেকট্রাল পারফরম্যান্স সিস্টেমকে পছন্দ করেন কি?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
resolution আউটপুট ডিভাইসের রেজলিউশন, dpi বা dpcm-এর মাধ্যমে ব্যবহার করা হয়。
scan আউটপুট ডিভাইসের স্ক্যানিং প্রক্রিয়া (টেলিভিশন ইত্যাদি এর জন্য)。
scripting

স্ক্রিপ্টিং (যেমন JavaScript) কিনা উপলব্ধ?

মিডিয়া কোয়াইল লেভেল 5-এ যোগ করা হয়েছে。
update

আউটপুট ডিভাইসের রেন্ডারিং ফ্রিকোয়েন্সি অপদাত্ত করা হয়。

মিডিয়া কোয়াইল লেভেল 4-এ যোগ করা হয়েছে。
width ভিউপোর্ট (viewport) এর প্রস্থতা。

আরও উদাহরণ

উদাহরণ 2

যদি ব্রাউজারের প্রস্থতা 600px বা তার কম, তবে এলিমেন্টটিকে লুকানো হবে:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 3

যদি ভিউপোর্টের প্রস্থতা 800 পিক্সেল বা তার বেশি, তবে পটভূমির রঙটিকে নীলফুল রঙে নিয়ে আসুন; যদি ভিউপোর্টের প্রস্থতা 400 থেকে 799 পিক্সেলের মধ্যে, তবে পটভূমির রঙটিকে নীলফুল রঙে নিয়ে আসুন: যদি ভিউপোর্ট 400 পিক্সেলের কম, তবে পটভূমির রঙটিকে আকাশীভূমির রঙে নিয়ে আসুন:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 4

একটি প্রতিক্রিয় নেভিগেশন মেনু তৈরি করুন (বড় স্ক্রিনে হলকরা এবং ছোট স্ক্রিনে শ্লঙ্ক হয়):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 5

মিডিয়া কোয়ালিফাইয়ার ব্যবহার করে প্রতিক্রিয় কলম সাজসজ্জা তৈরি করুন:

/* 992px বা তার কম মাপাক্ষেপে, চারটি কলম দুইটি কলমে পরিবর্তন করুন */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 600 পিক্সেল বা তার কম মাপাক্ষেপে, কলমগুলো স্ট্যাকড় হয়, না তবে পারাপারে দাঁড়ায় */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 6

মিডিয়া কোয়ালিফাইয়ার ব্যবহার করে প্রতিক্রিয় ওয়েবসাইট তৈরি করুন:

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 7

মিডিয়া কোয়ালিফাইয়ারও ব্যবহার করা যেতে পারে যাতে ব্রাউজারের দিশা অনুযায়ী পৃষ্ঠার সাজসজ্জা পরিবর্তন করা যায়। আপনি একটি সমস্ত সিএসএস বৈশিষ্ট্য লিখতে পারেন যা শুধুমাত্র ব্রাউজার উইন্ডোর প্রস্থ বেশি হলেই প্রয়োগ হয় (অর্থাৎ 'ল্যান্ডস্কেপ' দিশা):

যদি দিশা ল্যান্ডস্কেপ মোডে থাকে, তবে কমলা ব্যাকগ্রাউন্ড রঙ ব্যবহার করুন:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 8

মিডিয়া কোয়ালিফাইয়ার ব্যবহার করে ডকুমেন্টটি প্রদর্শনের সময় স্ক্রিনে সবুজ রঙের লেখা এবং প্রিন্টের সময় কালো রঙের লেখা করতে:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 9

কমা দ্বারা বিভক্ত তালিকা: কমা দ্বারা একটি অতিরিক্ত মিডিয়া কোয়ালিফাইয়ার যোগ করুন যা সম্প্রতি উপস্থিত মিডিয়া কোয়ালিফাইয়ারের আচরণের মতোই (যা OR অপারেটরের মতো আচরণ করে):

/* 600px এবং 900px মধ্যে বা 1100px বেশি মাপাক্ষেপ হলে - <div> এর আবহার পরিবর্তন করুন */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

আপনার নিজেই প্রয়োগ করুন

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

টেবিলের সংখ্যা প্রতিবেদন করেছে যে, @media রুলের প্রথম ব্রাউজার সংস্করণটি সম্পূর্ণরূপে সমর্থিত。

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9
  • পূর্ববর্তী পৃষ্ঠা max-width
  • পরবর্তী পৃষ্ঠা min-block-size