মিডিয়া প্রশ্নের

ডিজাইনার ব্যবহারকারীদের মিটমাট করার জন্য তাদের ডিজাইন সামঞ্জস্য করতে পারেন। এর স্পষ্ট উদাহরণ হল একজন ব্যবহারকারীর ডিভাইসের ফর্ম ফ্যাক্টর; এর প্রস্থ, ডিভাইসের আকৃতির অনুপাত ইত্যাদি। মিডিয়া প্রশ্ন ব্যবহার করে, ডিজাইনাররা এই বিভিন্ন ফর্ম ফ্যাক্টরগুলির প্রতিক্রিয়া জানাতে পারে।

মিডিয়া প্রশ্নগুলি @media কীওয়ার্ড (একটি সিএসএস এ-রুল) দিয়ে শুরু করা হয়, এবং বিভিন্ন ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে।

আউটপুট বিভিন্ন ধরনের লক্ষ্য

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

এই উদাহরণে, পটভূমির রঙ ধূসর সেট করা হয়েছে। কিন্তু পৃষ্ঠাটি মুদ্রিত হলে, পটভূমির রঙ স্বচ্ছ হওয়া উচিত। এটি ব্যবহারকারীর প্রিন্টারের কালি সংরক্ষণ করে।

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

আপনি আপনার স্টাইলশীটে @media at-rule ব্যবহার করতে পারেন, অথবা আপনি একটি পৃথক স্টাইলশীট তৈরি করতে পারেন এবং একটি link উপাদানে media বৈশিষ্ট্য ব্যবহার করতে পারেন:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

আপনি যদি আপনার CSS-এর জন্য কোনো মিডিয়া টাইপ নির্দিষ্ট না করেন, তাহলে এটিতে স্বয়ংক্রিয়ভাবে all একটি মিডিয়া টাইপ মান থাকবে। CSS-এর এই দুটি ব্লক সমতুল্য:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

HTML এর এই দুটি লাইনও সমান:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

ক্যোয়ারী শর্ত

আপনি মিডিয়া ধরনের শর্ত যোগ করতে পারেন. এগুলোকে মিডিয়া কোয়েরি বলা হয়। মিডিয়া টাইপ মেলে এবং শর্তটিও সত্য হলেই CSS প্রয়োগ করা হয়। এই শর্তগুলিকে মিডিয়া বৈশিষ্ট্য বলা হয়।

এটি মিডিয়া প্রশ্নের জন্য সিনট্যাক্স:

@media type and (feature)

আপনার শৈলী একটি পৃথক স্টাইলশীটে থাকলে আপনি একটি link উপাদানে মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারেন:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

ধরা যাক আপনি ব্রাউজার উইন্ডোটি ল্যান্ডস্কেপ মোডে আছে কিনা (ভিউপোর্টের প্রস্থ তার উচ্চতার চেয়ে বেশি) বা পোর্ট্রেট মোড (ভিউপোর্টের উচ্চতা তার প্রস্থের চেয়ে বেশি) এর উপর নির্ভর করে বিভিন্ন শৈলী প্রয়োগ করতে চান। orientation নামে একটি মিডিয়া বৈশিষ্ট্য রয়েছে যা আপনি পরীক্ষা করতে ব্যবহার করতে পারেন:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

অথবা যদি আপনি আলাদা স্টাইলশীট পছন্দ করেন: 

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

এ ক্ষেত্রে মিডিয়া টাইপ all । যেহেতু এটি ডিফল্ট মান, আপনি চাইলে এটি ছেড়ে দিতে পারেন: 

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

অথবা পৃথক স্টাইলশীট ব্যবহার করে: 

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

বিভিন্ন মিডিয়া প্রকারের জন্য পৃথক স্টাইলশীট ব্যবহার করার সময় — যেমন print — ঠিক হতে পারে, এটি সম্ভবত প্রতিটি মিডিয়া ক্যোয়ারির জন্য একটি পৃথক স্টাইলশীট ব্যবহার করা ভাল ধারণা নয়৷ পরিবর্তে @media at-রুল ব্যবহার করুন।

ভিউপোর্ট আকারের উপর ভিত্তি করে শৈলী সামঞ্জস্য করুন

প্রতিক্রিয়াশীল ডিজাইনের জন্য, সবচেয়ে দরকারী মিডিয়া বৈশিষ্ট্যগুলির মধ্যে একটি ব্রাউজার ভিউপোর্টের মাত্রা জড়িত। ব্রাউজার উইন্ডো একটি নির্দিষ্ট প্রস্থের চেয়ে প্রশস্ত হলে শৈলী প্রয়োগ করতে, min-width ব্যবহার করুন৷ 

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

একটি নির্দিষ্ট প্রস্থের নিচে শৈলী প্রয়োগ করতে max-width মিডিয়া বৈশিষ্ট্য ব্যবহার করুন: 

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

আপনি আপনার মিডিয়া ক্যোয়ারীতে যেকোনো CSS দৈর্ঘ্যের ইউনিট ব্যবহার করতে পারেন। যদি আপনার বিষয়বস্তু বেশিরভাগ ইমেজ-ভিত্তিক হয়, তাহলে পিক্সেল সবচেয়ে বেশি অর্থবহ হতে পারে। যদি আপনার বিষয়বস্তু বেশিরভাগই পাঠ্য-ভিত্তিক হয়, তাহলে সম্ভবত em বা ch মতো পাঠ্য আকারের উপর ভিত্তি করে একটি আপেক্ষিক ইউনিট ব্যবহার করা আরও বোধগম্য হবে। 

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

আপনি একাধিক শর্ত প্রয়োগ করতে মিডিয়া প্রশ্নগুলি একত্রিত করতে পারেন। শব্দটি ব্যবহার করুন and আপনার মিডিয়া প্রশ্নগুলি একত্রিত করুন: 

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

বিষয়বস্তুর উপর ভিত্তি করে ব্রেকপয়েন্ট বেছে নিন

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

এই উদাহরণে, 50em হল সেই বিন্দু যেখানে পাঠ্যের লাইনগুলি অস্বস্তিকরভাবে দীর্ঘ হয়ে যায়। তাই ইন্টারফেসটিকে আরও সুস্পষ্ট করতে একটি ব্রেকপয়েন্ট তৈরি করা হয়েছে। column-count বৈশিষ্ট্য ব্যবহার করে, পাঠ্যটি সেই বিন্দু থেকে দুটি কলামে বিভক্ত। 

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

কম্বিনেশন

আপনি ভিউপোর্টের উচ্চতার উপর ভিত্তি করে মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন, শুধু প্রস্থ নয়। এটি "ভাঁজের উপরে" ইন্টারফেস সামগ্রী অপ্টিমাইজ করার জন্য দরকারী হতে পারে। পূর্ববর্তী উদাহরণে, যদি পাঠকরা একটি প্রশস্ত কিন্তু সংক্ষিপ্ত ব্রাউজার উইন্ডো ব্যবহার করেন, তাহলে তাদের একটি কলামে স্ক্রোল করতে হবে এবং তারপরে দ্বিতীয় কলামের শীর্ষে যাওয়ার জন্য পিছনে স্ক্রোল করতে হবে। ভিউপোর্ট যথেষ্ট প্রশস্ত এবং যথেষ্ট লম্বা হলেই শুধুমাত্র কলামগুলি প্রয়োগ করা নিরাপদ হবে৷

আপনি মিডিয়া প্রশ্নগুলি একত্রিত করতে পারেন যাতে শৈলীগুলি শুধুমাত্র তখনই প্রযোজ্য হয় যখন সমস্ত শর্ত সত্য হয়৷ এই উদাহরণে, কলাম শৈলী প্রয়োগ করার জন্য ভিউপোর্টটি কমপক্ষে 50em চওড়া এবং 60em লম্বা হতে হবে৷ এই ব্রেকপয়েন্টগুলি সামগ্রীর পরিমাণের উপর ভিত্তি করে বেছে নেওয়া হয়েছিল। 

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

এই উদাহরণগুলি দেখায় যে কীভাবে মিডিয়া কোয়েরিগুলি ব্যবহারকারীর ডিভাইসের ফর্ম ফ্যাক্টরের সাথে ডিজাইনগুলিকে খাপ খাইয়ে নিতে ব্যবহার করা যেতে পারে, তবে এগুলি কেবল সম্ভাবনার পৃষ্ঠকে স্ক্র্যাচ করে। মিডিয়া কোয়েরিগুলি প্রস্থ এবং উচ্চতা ছাড়িয়ে যেতে পারে, অ্যাক্সেসযোগ্যতা বৈশিষ্ট্য এবং থিম রঙের জন্য ব্যবহারকারীর পছন্দগুলি অ্যাক্সেস করে৷ লেআউট সামঞ্জস্য করতে মিডিয়া ক্যোয়ারী ব্যবহার করা একটি প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি দুর্দান্ত শুরু, যা এই বৈশিষ্ট্যগুলি এবং আরও অনেক কিছুর উপর তৈরি করে৷

আপনার উপলব্ধি পরীক্ষা করুন

প্রতিক্রিয়াশীল মিডিয়া প্রশ্নের আপনার জ্ঞান পরীক্ষা করুন.

মিডিয়া প্রশ্ন শুধুমাত্র পর্দা আকারের জন্য বিদ্যমান?

সত্য
আবার চেষ্টা করুন! প্রিন্ট, অন্ধকার এবং হালকা সিস্টেম পছন্দ এবং আরও অনেক কিছুর জন্য মিডিয়া প্রশ্ন।
মিথ্যা
🎉

স্ক্রীন কি একমাত্র জায়গা যেখানে ওয়েব সামগ্রী ব্যবহার করা হয় বা প্রদর্শিত হয়?

সত্য
আবার চেষ্টা করুন! একটি ওয়েবসাইট কাগজে মুদ্রিত হতে পারে, সার্চ ইঞ্জিন স্পাইডার দ্বারা ক্রল করা হতে পারে, স্ক্রিন রিডার প্রযুক্তির দ্বারা উচ্চস্বরে পড়তে পারে, এমনকি একজন সহকারীর মাধ্যমে বট দ্বারা ব্যবহারকারীদের কাছে পড়তে পারে।
মিথ্যা
🎉

ডিফল্ট মিডিয়া টাইপ হয়?

screen
আবার চেষ্টা করুন! screen ডিফল্ট প্রকার নয়।
none
আবার চেষ্টা করুন! none একটি বৈধ মিডিয়া টাইপ নয়।
all
🎉
some
আবার চেষ্টা করুন! some একটি বৈধ মিডিয়া টাইপ নয়।
landscape
আবার চেষ্টা করুন! landscape একটি বৈধ মিডিয়া প্রকার নয়।

মোবাইলে একটি ডিজাইন স্কেল করা থেকে ব্রাউজারকে আটকাতে আপনি কী ব্যবহার করবেন?

width: 100%
আবার চেষ্টা করুন!
font-size: 200%
আবার চেষ্টা করুন!
<meta name="viewport" content="width=device-width, initial-scale=1">
🎉
মিডিয়া প্রশ্ন
আবার চেষ্টা করুন!
HTML5
আবার চেষ্টা করুন!

ব্রাউজার উইন্ডো 720px এর উপরে হলে কোন মিডিয়া ক্যোয়ারী প্রযোজ্য।

@media (width: 720px)
আবার চেষ্টা করুন! এই মিডিয়া ক্যোয়ারী শুধুমাত্র তখনই হয় যখন ব্রাউজার উইন্ডো 720px এর সমান হয়।
@media (max-width: 720px)
আবার চেষ্টা করুন! যখন ব্রাউজার উইন্ডো 720px নিচে থাকে তখন এই মিডিয়া ক্যোয়ারী।
@media (min-width: 720px)
🎉 আপনি এটি পড়তে পারেন কারণ ব্রাউজার উইন্ডোটি কমপক্ষে 720px ।
@media (clamp-width: 720px)
আবার চেষ্টা করুন! clamp-width একটি বৈধ মিডিয়া কোয়েরি বৈশিষ্ট্য শর্ত নয়।