মূলঃ Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes, লেখকঃ Cem Eygi

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

প্রিবর্তনশীল লেআউটের একটি ওয়েবসাইট বানানোকে রেসপন্সিভ ওয়েব ডিজাইন বলে। এবং CSS মিডিয়া কুয়েরি হল রেসপন্সিভ ওয়েব ডিজাইনের সবথেকে গুরুত্বপূর্ণ অংশগুলির একটি। এই আর্টিকেলে আমরা মিডিয়া কুয়েরি এবং তাদের ব্যবহার সম্পর্কে জানবো।

আপনি চাইলে এই টিউটোরিয়ালটির ভিডিও সংস্করণটি দেখতে পারেনঃ

মিডিয়া কুয়েরি কি?

মিডিয়া কুয়েরি হল একটি CSS3 ফিচার যা একটি ওয়েবপেজ লেআউটকে বিভিন্ন স্ক্রীনের আকার এবং মিডিয়া প্রকারের সাথে খাপ খাইয়ে নিতে সহায়তা করে।

সিনট্যাক্স

@media media type and (condition: breakpoint) {
  // CSS rules
}

মিডিয়া কুয়েরি ব্যবহার করে আমরা বিভিন্ন শর্তের মধ্যে ভিন্ন ভিন্ন ধরণের মিডিয়া টাইপকে টার্গেট করতে পারি। যদি শর্ত এবং/অথবা মিডিয়া টাইপ মিলে যায় তাহলে মিডিয়া কুয়েরির ভেতরের রুল কার্যকর হবে নাহলে হবে না।

সিনট্যাক্সটি শুরুতে জটিল মনে হতে পারে, তাই চলুন এর প্রতিটি অংশকে আলাদা আলাদাভাবে বিশ্লেষণ করা যাক।

@ মিডিয়া রুল

আমরা @media রুলের মাধ্যমে একটি মিডিয়া কুয়েরি ডিফাইন করা শুরু করি এবং এরপর দ্বিতীয় বন্ধনীর ভেতরে CSS রুলগুলি লিখি। @ মিডিয়া রুলের মাধ্যমে টার্গেট মিডিয়া টাইপও নির্ধারণ করা যায়।

@media () {
  // CSS rules
}

প্রথম বন্ধনী

প্রথম বন্ধনী বা parenthesis গুলির ভেতরে আমরা একটি শর্ত বা condition সেট করি। উদাহরণস্বরূপ, মোবাইল ডিভাইসের জন্য আমি ফন্ট সাইজ বড় করতে চাই। এর জন্য আমাদের একটি max-width সেট করতে হবে যেটি ডিভাইসের width পরীক্ষা করে দেখবেঃ

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

সাধারণভাবে ফন্ট সাইজ 14px থাকবে কিন্তু আমরা যেহেতু মিডিয়া কুয়েরি যুক্ত করেছি, ডিভাইসের width 480px বা তার কম হলে ফন্ট সাইজ 16px হয়ে যাবে।

উল্লেখ্যঃ আপনার মিডিয়া কুয়েরিগুলি সবসময় CSS ফাইলের শেষে যুক্ত করবেন।

মিডিয়া টাইপ

আমরা যদি কোন মিডিয়া টাইপ নির্ধারণ করে না দেই তাহলে @ মিডিয়া রুলটি বাই ডিফল্ট সব ধরণের ডিভাইস সিলেক্ট করবে। @ মিডিয়া রুলের পরেই মিডিয়া টাইপ লিখতে হয়। অনেক ধরণের ডিভাইস আছে কিন্তু আমরা সেগুলিকে ৪টি ক্যাটেগরিতে ভাগ করতে পারিঃ

  • all - সব ধরণের মিডিয়া টাইপের জন্য
  • print - প্রিন্টারগুলির জন্য
  • screen - কম্পিউটার স্ক্রীন, ট্যাবলেট, এবং স্মার্ট ফোনের জন্য
  • speech - স্ক্রীন রিডারসমূহের জন্য

উদাহরণস্বরূপ, যখন আমি শুধু স্ক্রীন সিলেক্ট করতে চাই তখন আমি @ মিডিয়া রুলের পরেই screen কীওয়ার্ডটি লিখবো। এরপর "and" কীওয়ার্ডের মধ্যমে রুলটি সংযুক্ত করতে হবেঃ

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

ব্রেকপয়েন্ট

ব্রেকপয়েন্টের মাধ্যমে নির্ধারণ করা হয় কখন লেআউটটি পরিবর্তন হবে। আমাদের প্রথম উদাহরণটিতে ফিরে যাওয়া যাকঃ

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

এখানে ব্রেকপয়েন্ট হল 480px। সুতরাং যদি একটি ডিভাইসের width 480px এর নিচে হয় তাহলে text ক্লাসটি কার্যকর হবে নয়তো না।

কমন ব্রেকপয়েন্টঃ কোন স্ট্যান্ডার্ড রেজোলিউশন আছে কি?

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

তাই ডিভাইসগুলির জন্য কোন স্ট্যান্ডার্ড রেজলিউশান আছে এমন কথা আমরা বলতে পারি না। তবে কিছু বহুল ব্যবহৃত ব্রেকপয়েন্ট আছে যা প্রতিনিয়ত ব্যবহার হয়। আপনি যদি কোন CSS ফ্রেমওয়ার্ক ব্যবহার করেন (যেমন Bootstrap, Bulma, ইত্যাদি) তাহলে আপনি ফ্রেমওয়ার্কের ব্রেকপয়েন্টগুলিও ব্যবহার করতে পারেন।

চলুন এবার বিভিন্ন width এর ডিভাইসের কিছু সাধারণ ব্রেকপয়েন্ট দেখা যাকঃ

  • 320px — 480pxঃ মোবাইল ডিভাইস
  • 481px — 768pxঃ আইপ্যাড, ট্যাবলেট
  • 769px — 1024pxঃ ছোট স্ক্রীন, ল্যাপটপ
  • 1025px — 1200pxঃ বড় স্ক্রীন, ডেস্কটপ
  • 1201px and moreঃ এক্সট্রা লার্জ স্ক্রীন, টিভি

যেমনটা আমি বলেছি, এই ব্রেকপয়েন্টগুলি পরিবর্তন হতে পারে এবং এদের কোন সেট স্ট্যান্ডার্ড নেই। তবে এই ব্রেকপয়েন্টগুলি বহুল ব্যবহৃত।

উপসংহার

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

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

পড়ার জন্য ধন্যবাদ!