মিডিয়া বৈশিষ্ট্যগুলি আপনাকে ডিভাইস এবং পছন্দগুলিতে প্রতিক্রিয়া জানাতে দেয় এমন সমস্ত উপায়গুলির একটি রাউন্ড-আপ৷
প্রতিক্রিয়াশীল নকশা মিডিয়া প্রশ্ন ছাড়া সম্ভব হবে না. মিডিয়া প্রশ্ন করার আগে লোকেরা আপনার ওয়েবসাইট দেখার জন্য কি ধরনের ডিভাইস ব্যবহার করছে তা জানার কোন উপায় ছিল না। ডিজাইনারদের অনুমান করতে হয়েছিল। এই অনুমানগুলি নির্দিষ্ট-প্রস্থ ডিজাইন বা তরল লেআউটগুলিতে এনকোড করা হয়েছিল।
মিডিয়া প্রশ্নের প্রবর্তনের সাথে সাথে সবই বদলে গেছে। প্রথমবারের মতো ডিজাইনাররা অর্ধেক লোকেদের সাথে দেখা করতে পারে। ডিজাইনাররা মানুষের ডিভাইসে সাড়া দিতে তাদের লেআউট সামঞ্জস্য করতে পারে।
মনে রাখবেন, একটি মিডিয়া কোয়েরিতে একটি ঐচ্ছিক মিডিয়া প্রকার এবং একটি বাধ্যতামূলক মিডিয়া বৈশিষ্ট্য রয়েছে। কয়েক বছর ধরে মিডিয়ার ধরণে খুব বেশি পরিবর্তন হয়নি। এখনও মাত্র চারটি সম্ভাব্য মান আছে:
@media all
@media screen
@media print
@media speech
অন্যদিকে মিডিয়া বৈশিষ্ট্যগুলি ব্যাপকভাবে প্রসারিত হয়েছে। ডিজাইনাররা এখন অর্ধেক পথ অতিক্রম করে ব্যবহারকারীদের সাথে দেখা করতে পারে, স্ক্রিনের আকারের চেয়ে অনেক বেশি মানানসই ডিজাইনগুলিকে মানিয়ে নিতে পারে৷
ভিউপোর্টের মাত্রা
এখন পর্যন্ত ওয়েবে সবচেয়ে জনপ্রিয় মিডিয়া প্রশ্ন হল ভিউপোর্ট প্রস্থ নিয়ে কাজ করা। কিন্তু এমনকি এখানে, আপনি একটি পছন্দ সঙ্গে উপস্থাপন করছি. আপনি একটি নির্দিষ্ট প্রস্থের নীচে শৈলী প্রয়োগ করতে max-width মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন, অথবা আপনি একটি নির্দিষ্ট প্রস্থের উপরে শৈলী প্রয়োগ করতে min-width মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন।
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
ব্যক্তিগতভাবে, আমি min-width ব্যবহার করতে পছন্দ করি। আমি একটি সংযোজন উপায়ে লেআউট শৈলী প্রয়োগ করি। আমি পূর্ববর্তী নিয়মগুলি পূর্বাবস্থায় ফেরানোর পরিবর্তে প্রতিটি ব্রেকপয়েন্টে নতুন লেআউট নিয়ম চালু করি।
এই সংযোজন পদ্ধতি উচ্চতার জন্যও কাজ করে। min-height ব্যবহার করে আপনি আরও নিয়ম প্রবর্তন করতে পারেন কারণ আরও ভিউপোর্ট উচ্চতা পাওয়া যায়। উদাহরণস্বরূপ, আপনার কাছে একটি শিরোনাম উপাদান থাকতে পারে যা আপনি ব্রাউজার উইন্ডোর শীর্ষে নোঙ্গর করতে চান যদি পর্যাপ্ত উল্লম্ব স্থান থাকে।
@media (min-height: 30em) {
header {
position: fixed;
}
}
তবে আপনি চাইলে max-height মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এখানে, হেডারটি ডিফল্টরূপে নোঙ্গর করা হয়, কিন্তু পর্যাপ্ত উল্লম্ব স্থান না থাকলে আঠালোতা সরানো হয়।
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
min- এবং max- উপসর্গের মধ্যে নির্বাচন করা শুধুমাত্র width এবং height প্রযোজ্য নয়। aspect-ratio মিডিয়া বৈশিষ্ট্য একই পছন্দ অফার করে. আপনি যদি প্রস্থ থেকে উচ্চতার সঠিক অনুপাতে শৈলী প্রয়োগ করতে চান তবে এটি একটি উপসর্গবিহীন সংস্করণও অফার করে।
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
বিভিন্ন আকৃতির অনুপাতের জন্য বিভিন্ন শৈলী প্রদান করা দ্রুত হাত থেকে বেরিয়ে যেতে পারে। আপনার যদি সেই সূক্ষ্ম মাত্রার নিয়ন্ত্রণের প্রয়োজন না হয়, তাহলে orientation মিডিয়া বৈশিষ্ট্যটি আপনার প্রয়োজনের সাথে আরও ভালভাবে মানানসই হতে পারে। এর দুটি সম্ভাব্য মান রয়েছে: portrait বা landscape ।
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
যদিও "পোর্ট্রেট" এবং "ল্যান্ডস্কেপ" শব্দগুলি প্রায়শই মোবাইল ডিভাইসের ওরিয়েন্টেশন বোঝাতে ব্যবহৃত হয়, তবে orientation মিডিয়া বৈশিষ্ট্যটি ডিভাইস-নির্দিষ্ট নয়। একটি সাধারণ ল্যাপটপে একটি পূর্ণ-স্ক্রীন ব্রাউজার উইন্ডোতে landscape একটি orientation মান থাকবে।
প্রদর্শন করে
বিভিন্ন ডিসপ্লেতে বিভিন্ন পিক্সেল ঘনত্ব থাকে, যা dpi , ডট প্রতি ইঞ্চিতে পরিমাপ করা হয়। আপনি resolution মিডিয়া বৈশিষ্ট্য ব্যবহার করে বিভিন্ন পিক্সেল ঘনত্বের জন্য আপনার শৈলী সামঞ্জস্য করতে পারেন। aspect-ratio মতো, resolution তিনটি প্রকারে আসে: সর্বনিম্ন, সর্বোচ্চ এবং সঠিক।
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
আপনি কোনো resolution মিডিয়া প্রশ্ন ব্যবহার করার প্রয়োজন হতে পারে. পিক্সেল ঘনত্ব সাধারণত চিত্রগুলির জন্য একটি সমস্যা, এবং প্রতিক্রিয়াশীল চিত্রগুলি সরাসরি HTML এ পিক্সেল ঘনত্বের সাথে মোকাবিলা করার একটি উপায়।
অন্যদিকে, CSS হল যেখানে আপনি আপনার অ্যানিমেশন এবং ট্রানজিশন সংজ্ঞায়িত করেন। update মিডিয়া বৈশিষ্ট্য ব্যবহার করে বিভিন্ন রিফ্রেশ হারে প্রতিক্রিয়া জানাতে আপনি সেই অ্যানিমেশনগুলি এবং রূপান্তরগুলি সামঞ্জস্য করতে পারেন। এই মিডিয়া বৈশিষ্ট্যটি তিনটি মানগুলির মধ্যে একটির রিপোর্ট করে: none , slow এবং fast ৷
none update মান মানে কোন রিফ্রেশ রেট নেই। একটি মুদ্রিত পৃষ্ঠা, উদাহরণস্বরূপ, আপডেট করা যাবে না।
slow একটি update মান মানে ডিসপ্লে দ্রুত রিফ্রেশ করতে পারে না। একটি ই-কালি প্রদর্শন একটি ধীর রিফ্রেশ হার সহ একটি স্ক্রিনের একটি উদাহরণ।
fast একটি update মান মানে অ্যানিমেশন এবং ট্রানজিশন পরিচালনা করার জন্য ডিসপ্লে যথেষ্ট দ্রুত রিফ্রেশ করে।
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
প্রদর্শনের সমস্ত দিক হার্ডওয়্যার ক্ষমতার সাথে সম্পর্কিত নয়। থিমিং-এর মডিউলে , আপনি দেখেছেন কিভাবে একটি ওয়েব অ্যাপ ম্যানিফেস্ট ফাইলে বৈশিষ্ট্য সংজ্ঞায়িত করতে হয়। এই বৈশিষ্ট্যগুলির মধ্যে একটিকে display বলা হয়, এবং আপনি এটিকে fullscreen , standalone , minimum-ui বা browser মান দিতে পারেন। সংশ্লিষ্ট display-mode মিডিয়া বৈশিষ্ট্য আপনাকে এই বিভিন্ন বিকল্পের জন্য আপনার শৈলীগুলিকে উপযোগী করতে দেয়।
ধরা যাক আপনি আপনার ওয়েব অ্যাপ ম্যানিফেস্টে standalone একটি display মান প্রদান করেছেন। কেউ যদি আপনার সাইটটি তাদের হোম স্ক্রিনে যোগ করে, তবে সাইটটি কোনো ব্রাউজার ইন্টারফেস ছাড়াই চালু হবে। আপনি সেই ব্যবহারকারীদের জন্য একটি ব্যাক বোতাম প্রদর্শন করার সিদ্ধান্ত নিতে পারেন।
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
রঙ
একটি ডিভাইসের রঙ ক্ষমতা অনুসন্ধানের জন্য অসংখ্য মিডিয়া বৈশিষ্ট্য রয়েছে। আপনি যদি কোনো ডিসপ্লেতে আপনার স্টাইল সামঞ্জস্য করতে চান যা শুধুমাত্র ধূসর শেডের আউটপুট দেয়, আপনি কোনো মান ছাড়াই monochrome মিডিয়া বৈশিষ্ট্য ব্যবহার করতে পারেন।
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
একটি সংশ্লিষ্ট color মিডিয়া বৈশিষ্ট্য আছে.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
রঙিন পর্দার জন্য, আপনি মিডিয়া বৈশিষ্ট্যগুলির সাথে ক্যোয়ারী লিখতে পারেন color-gamut , color-index , or dynamic-range . তাদের সব পর্দার রঙ ক্ষমতা সম্পর্কে নির্দিষ্ট বিবরণ রিপোর্ট.
এই উদাহরণে, রঙের মানগুলি dynamic-range মিডিয়া বৈশিষ্ট্যের প্রতিক্রিয়া হিসাবে আপডেট হয়, যা প্রদর্শনের সর্বাধিক উজ্জ্বলতা, রঙের গভীরতা এবং বৈপরীত্য অনুপাতের সমন্বয় রিপোর্ট করে। সম্ভাব্য মানগুলি standard বা high । একটি হাই-ডেফিনিশন স্ক্রিন যা high -এর একটি dynamic-range মান রিপোর্ট করে নতুন CSS color() ফাংশন ব্যবহার করে একটি ভিন্ন রঙের স্থান দেওয়া হয়।
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
মিথষ্ক্রিয়া
মিডিয়া বৈশিষ্ট্যগুলি আপনার সাইটের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত ইনপুট প্রক্রিয়ার ধরনের রিপোর্ট করতে পারে: hover , any-hover , pointer , এবং any-pointer । আরো বিস্তারিত জানার জন্য মিথস্ক্রিয়া মডিউল দেখুন.
পছন্দসমূহ
মিডিয়া প্রশ্নগুলির একটি পরিসর রয়েছে যা আপনাকে ব্যবহারকারীর পছন্দগুলিতে প্রতিক্রিয়া জানাতে দেয়: prefers-color-scheme , prefers-contrast , এবং prefers-reduced-motion । আরও বিশদ বিবরণের জন্য থিমিং এবং অ্যাক্সেসযোগ্যতার মডিউলগুলি দেখুন।
আপনি একটি মিডিয়া ক্যোয়ারীতে মিডিয়া বৈশিষ্ট্যগুলিকে একত্রিত করতে পারেন৷ আপনি আপনার অ্যানিমেশন শৈলীগুলিকে স্কোপ করতে পারেন যাতে ডিভাইসটির দ্রুত রিফ্রেশ রেট থাকে এবং ব্যবহারকারী হ্রাস গতির জন্য পছন্দ প্রকাশ না করে তবেই সেগুলি প্রয়োগ করা হয়।
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
আরও মিডিয়া বৈশিষ্ট্য
পথে আরো মিডিয়া বৈশিষ্ট্য আছে.
forced-colors এবং inverted-colors মিডিয়া ফিচার রিপোর্ট করবে যে কোনও ডিভাইস রেস্ট্রিক্টেড বা ইনভার্টেড কালার প্যালেট ব্যবহার করছে কিনা।
একটি scripting মিডিয়া বৈশিষ্ট্য আপনাকে জাভাস্ক্রিপ্টের প্রাপ্যতার উপর ভিত্তি করে আপনার CSS সামঞ্জস্য করার অনুমতি দেবে।
prefers-reduced-data নামে একটি মিডিয়া বৈশিষ্ট্য ব্যবহারকারীদের নির্দিষ্ট করতে দেয় যে তারা একটি মিটারযুক্ত সংযোগে রয়েছে যাতে আপনি ছোট বা কম সম্পদ পাঠাতে পারেন।
অন্যান্য প্রস্তাবনা এখনো প্রণয়ন করা হচ্ছে। পরবর্তী এবং চূড়ান্ত মডিউলে, আপনি একটি মিডিয়া বৈশিষ্ট্যের প্রস্তাব সম্পর্কে শিখবেন যা বিভিন্ন স্ক্রীন কনফিগারেশন পরিচালনা করে।
আপনার উপলব্ধি পরীক্ষা করুন
মিডিয়া বৈশিষ্ট্য আপনার জ্ঞান পরীক্ষা
একটি মিডিয়া কোয়েরি @media (width: 1024px) এর মতো একটি নির্দিষ্ট প্রস্থে একটি ডিভাইসের জন্য পরীক্ষা করতে পারে?
1023px উপরে এবং 1025px নিচে প্রস্থ পরীক্ষা করার মাধ্যমে সম্পন্ন করা যেতে পারে।min-width এবং max-width যা উপলব্ধ। একটি মিডিয়া ক্যোয়ারী @media (aspect-ratio: 4/3) এর মত একটি নির্দিষ্ট aspect-ratio একটি ডিভাইসের জন্য পরীক্ষা করতে পারে?
aspect-ratio জন্য বিদ্যমান।কোনটি বৈধ রঙিন মিডিয়া প্রশ্ন?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)নিম্নলিখিত ব্যবহারকারীদের পছন্দ মিডিয়া প্রশ্নগুলির মধ্যে কোনটি বৈধ?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)