মিডিয়া কোয়েরি ডিভাইসের বৈশিষ্ট্যের উপর ভিত্তি করে CSS শর্তসাপেক্ষভাবে প্রয়োগ করে — প্রায়শই viewport প্রস্থ — যা একটি স্টাইলশীটকে ফোন, ট্যাবলেট এবং ডেস্কটপের সাথে খাপ খাইয়ে নিতে দেয়।
{ : ; }
(: ) {
{ : ; : grid; : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }
/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
মোবাইল-প্রথম (min-width) সাধারণত পছন্দনীয়: আপনি ছোট স্ক্রিনের জন্য সরল ভিত্তি শৈলী লিখেন, তারপর বৃহত্তর স্ক্রিনের জন্য ধাপে ধাপে জটিলতা যোগ করেন। এটি পরিষ্কার এবং হালকা CSS তৈরি করতে এবং বিষয়বস্তু কীভাবে পুনর্প্রবাহিত হয় তার সাথে সামঞ্জস্যপূর্ণ।
@media (max-width: 600px) { } /* small screens */
@media (orientation: landscape) { } /* device orientation */
@media (prefers-color-scheme: dark) { } /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { } /* user dislikes animation — accessibility */
@media print { } /* print stylesheet */
prefers-reduced-motion এবং prefers-color-scheme ব্যবহারকারীর পছন্দে প্রতিক্রিয়া জানায়, স্ক্রিন আকার নয় — অ্যাক্সেসযোগ্যতা এবং থিমিংয়ের জন্য গুরুত্বপূর্ণ।
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
মিডিয়া কোয়েরি viewport এ প্রতিক্রিয়া জানায়; নতুন কন্টেইনার কোয়েরি (@container) একটি প্যারেন্ট উপাদানের আকারে প্রতিক্রিয়া জানায় — সত্যিকারের পুনঃব্যবহারযোগ্য উপাদানগুলির জন্য আরও ভাল। তারা মিডিয়া কোয়েরি প্রতিস্থাপনের পরিবর্তে পরিপূরক।
মিডিয়া কোয়েরি প্রতিক্রিয়াশীল ডিজাইনের ভিত্তি — লেআউট, স্পেসিং এবং কলামগুলি স্ক্রিন আকারের সাথে খাপ খাইয়ে নেওয়া।
মোবাইল-প্রথম min-width পদ্ধতি CSS পরিচালনাযোগ্য রাখে, এবং পছন্দ কোয়েরি (prefers-reduced-motion, prefers-color-scheme) প্রতিক্রিয়াশীলতা অ্যাক্সেসযোগ্যতা এবং থিমিংয়ে প্রসারিত করে।