Responsive Design & Media Queries
রেসপনসিভ ডিজাইন ও মিডিয়া কোয়েরি
1. One Codebase, Every Screen Size
A phone screen, a tablet, and a 27-inch monitor all load the exact same HTML and CSS files from your server — yet a well-built page looks correct on every single one of them. That is what responsive design means: instead of building separate sites for separate devices, you write layout rules that adapt automatically to however much space is available. This module ties together everything you've learned about positioning, Flexbox, and Grid into layouts that actually survive contact with the real world.
Core insight: mobile-first design means you design for the small screen first, then use
min-width media queries to expand the layout as more space becomes available — never the
other way around.
min-width মিডিয়া কোয়েরি দিয়ে বড় স্ক্রিনের জন্য লেআউট বাড়ানো হয় — উল্টো দিক থেকে নয়।
2. Mobile-First vs Desktop-First
There are two ways to approach responsive CSS. In desktop-first, you write your base
styles for a wide screen, then use max-width media queries to shrink and simplify the
layout for smaller screens. In mobile-first, you flip the order: base styles target the
smallest screen, and min-width media queries add complexity as the viewport grows. Most
teams today prefer mobile-first because most real-world traffic is mobile, and it naturally produces
leaner CSS — you only add rules when you have extra space to spend, instead of writing overrides to take
things away.
max-width মিডিয়া কোয়েরি দিয়ে ছোট স্ক্রিনের জন্য লেআউট সহজ করা হয়। Mobile-first-এ ক্রম উল্টো — বেস স্টাইল সবচেয়ে ছোট স্ক্রিন টার্গেট করে, আর min-width মিডিয়া কোয়েরি স্ক্রিন বড় হওয়ার সাথে সাথে জটিলতা যোগ করে। বেশিরভাগ টিম আজকাল mobile-first পছন্দ করে, কারণ বাস্তব জগতে বেশিরভাগ ট্রাফিকই মোবাইল থেকে আসে, এবং এতে CSS-ও তুলনামূলক ছিমছাম হয়।
✗ Desktop-First (ডেস্কটপ-ফার্স্ট)
- Base CSS assumes a wide screen
- Uses
max-widthqueries to remove/shrink things - Mobile users still download unused desktop CSS logic
- Easy to forget a small-screen case
✅ Mobile-First (মোবাইল-ফার্স্ট)
- Base CSS assumes a small screen
- Uses
min-widthqueries to add/expand things - Matches how most visitors actually browse
- Encourages simpler, content-first design
3. @media Breakpoints — The Syntax
A media query is a CSS block that only applies when a condition about the viewport is
true. The most common condition is width: @media (min-width: 768px) { ... } applies its
rules only when the browser window is at least 768 pixels wide. A specific width value where your layout
changes shape is called a breakpoint. You don't need a breakpoint for every possible
device — you add one exactly where your own design starts to look cramped or awkward.
@media (min-width: 768px) { ... } কেবল তখনই প্রযোজ্য হয় যখন ব্রাউজার উইন্ডো কমপক্ষে ৭৬৮ পিক্সেল চওড়া। যে নির্দিষ্ট width-এ আপনার লেআউটের আকৃতি বদলায়, তাকে বলে breakpoint। প্রতিটি সম্ভাব্য ডিভাইসের জন্য আলাদা breakpoint দরকার নেই — ঠিক যেখানে আপনার নিজের ডিজাইন সংকুচিত বা বিশ্রী দেখাতে শুরু করে, সেখানেই একটি breakpoint যোগ করবেন।
| Syntax piece | Meaning | বাংলায় |
|---|---|---|
@media (min-width: Npx) | Applies when the viewport is N pixels wide or wider (mobile-first). | viewport N পিক্সেল বা তার বেশি চওড়া হলে প্রযোজ্য (mobile-first)। |
@media (max-width: Npx) | Applies when the viewport is N pixels wide or narrower (desktop-first). | viewport N পিক্সেল বা তার কম চওড়া হলে প্রযোজ্য (desktop-first)। |
and | Combines two conditions, e.g. a width range. | দুটি শর্ত একসাথে মেলানোর জন্য ব্যবহৃত হয়, যেমন একটি width রেঞ্জ। |
(orientation: landscape) | Applies based on whether the device is wider than tall. | ডিভাইসটি লম্বার চেয়ে চওড়া কিনা তার ওপর ভিত্তি করে প্রযোজ্য হয়। |
4. Live Demo — A Row That Becomes a Column
The live preview panel below is itself a fairly narrow iframe, so instead of the usual 768px tablet
breakpoint, this demo uses @media (max-width: 500px) so the effect is visible right inside
this page without resizing anything. Click Run ▶ — the two cards start in a row because
the preview frame is under 500px wide, proving the media query already applied. Then imagine widening the
browser past 500px: the row layout would take over instead.
@media (max-width: 500px) ব্যবহার করা হয়েছে, যাতে কিছু resize না করেই এই পেজের ভেতরেই প্রভাবটি দেখা যায়। Run ▶-এ ক্লিক করুন — দুটি কার্ড কলাম আকারে সাজানো দেখাবে, কারণ প্রিভিউ ফ্রেমটি ৫০০ পিক্সেলের চেয়ে সংকীর্ণ, যা প্রমাণ করে মিডিয়া কোয়েরিটি ইতিমধ্যে কার্যকর হয়েছে। ব্রাউজার ৫০০ পিক্সেলের বেশি চওড়া করলে সারি (row) লেআউট ফিরে আসবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Cards</title>
</head>
<body>
<div class="wrap">
<div class="card">Card One</div>
<div class="card">Card Two</div>
</div>
</body>
</html>/* Mobile-first base: row layout by default */
.wrap {
display: flex;
flex-direction: row;
gap: 12px;
}
.card {
flex: 1;
padding: 20px;
background: #e6f4e8;
border: 2px solid #39b549;
border-radius: 8px;
text-align: center;
font-family: sans-serif;
font-weight: bold;
}
/* Narrow viewport (like this preview iframe): stack into a column */
@media (max-width: 500px) {
.wrap {
flex-direction: column;
}
.card {
background: #fff7ed;
border-color: #ea580c;
}
}5. Fluid Images & Containers
An <img> tag with a fixed width will overflow a narrow screen and force
horizontal scrolling — one of the most common responsive bugs. The fix is a simple, near-universal rule:
img { max-width: 100%; height: auto; }. This lets an image shrink to fit its container while
keeping its aspect ratio, but never grow past its real size and go blurry. The same max-width: 100%
idea applies to containers, tables, and embedded videos.
width দেওয়া একটি <img> ট্যাগ সংকীর্ণ স্ক্রিনে উপচে পড়ে এবং horizontal scroll বাধ্য করে — এটি সবচেয়ে সাধারণ responsive বাগগুলোর একটি। সমাধান একটি সহজ, প্রায়-সর্বজনীন নিয়ম: img { max-width: 100%; height: auto; }। এতে ছবিটি তার container-এর সাথে মানিয়ে সংকুচিত হতে পারে, aspect ratio ঠিক রেখে, কিন্তু আসল আকারের চেয়ে বড় হয়ে ঝাপসা হয় না। একই max-width: 100% ধারণা container, table, ও embedded video-তেও প্রযোজ্য।
img, video { max-width: 100%; height: auto; display: block; } to almost every project's
base stylesheet — it costs nothing and silently prevents a huge class of overflow bugs.
প্রায় প্রতিটি প্রজেক্টের বেস স্টাইলশিটে
img, video { max-width: 100%; height: auto; display: block; } যোগ করুন — এতে কোনো খরচ নেই, অথচ এটি overflow-জনিত অনেক বাগ নীরবে প্রতিরোধ করে।
6. clamp() for Fluid Typography
Before clamp(), fluid font sizes needed a media query for every breakpoint. Now, one line
does it: font-size: clamp(1.2rem, 4vw, 2.5rem); takes three values — a minimum, a preferred
value that scales with viewport width, and a maximum. The browser picks the preferred value unless it
would fall below the minimum or above the maximum, in which case it clamps to that limit. This gives you
smooth, stepless scaling instead of type that jumps abruptly at each breakpoint.
clamp() আসার আগে fluid ফন্ট সাইজের জন্য প্রতিটি breakpoint-এ আলাদা মিডিয়া কোয়েরি দরকার হতো। এখন একটি লাইনই যথেষ্ট: font-size: clamp(1.2rem, 4vw, 2.5rem);-এ তিনটি মান থাকে — একটি সর্বনিম্ন, একটি preferred মান যা viewport width-এর সাথে স্কেল করে, আর একটি সর্বোচ্চ। ব্রাউজার preferred মানই বেছে নেয়, যতক্ষণ না তা সর্বনিম্নের নিচে বা সর্বোচ্চের ওপরে চলে যায় — তখন সেই সীমায় আটকে (clamp) যায়। এতে প্রতিটি breakpoint-এ হঠাৎ লাফানোর বদলে মসৃণ, ধাপবিহীন স্কেলিং পাওয়া যায়।
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fluid Type</title></head>
<body>
<h1>Fluid Heading</h1>
<p>Resize the preview and this text stays comfortable to read.</p>
</body>
</html>h1 {
font-size: clamp(1.4rem, 5vw + 1rem, 3rem);
font-family: sans-serif;
color: #1f6e2a;
}
p {
font-size: clamp(0.95rem, 1.5vw + 0.6rem, 1.2rem);
font-family: sans-serif;
color: #374151;
}7. Testing in DevTools Device Mode (ডিভাইস মোড)
You should never guess whether a layout works on mobile — verify it. In Chrome or Edge, open DevTools
(F12 or Ctrl+Shift+I) and click the small phone/tablet icon
(Ctrl+Shift+M) to toggle device mode. This lets you pick preset device
sizes, drag the viewport to any custom width, and simulate touch input — all without owning every
physical device yourself.
F12 বা Ctrl+Shift+I) এবং ছোট ফোন/ট্যাবলেট আইকনে ক্লিক করুন (Ctrl+Shift+M) — এতে device mode চালু হবে। এখান থেকে প্রিসেট ডিভাইস সাইজ বেছে নেওয়া যায়, যেকোনো কাস্টম width-এ viewport টেনে বদলানো যায়, এবং touch input সিমুলেট করা যায় — নিজের কাছে সব ফিজিক্যাল ডিভাইস না থাকলেও।
Phones (ফোন)
Tablets (ট্যাবলেট)
Small laptops (ছোট ল্যাপটপ)
Desktops (ডেস্কটপ)
8. Practice Problems
Try each problem yourself first, then open the answer and run it in the live preview.
-
Write CSS so that
.boxis full width on small screens, but exactly 400px wide once the viewport reaches 600px or more..box-কে ছোট স্ক্রিনে full width এবং viewport ৬০০ পিক্সেল বা তার বেশি হলে ঠিক ৪০০ পিক্সেল চওড়া করার CSS লিখুন।✨ Show Answer (উত্তর দেখুন)
ans1.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Box Width</title></head> <body> <div class="box">Responsive Box</div> </body> </html>style.css.box { width: 100%; padding: 16px; background: #e6f4e8; border: 2px solid #39b549; text-align: center; font-family: sans-serif; } @media (min-width: 600px) { .box { width: 400px; } } -
Fix this rule so a large image never overflows its container on a phone:
img { width: 800px; }.এই নিয়মটি ঠিক করুন যাতে বড় ছবি ফোনে তার container ছাড়িয়ে না যায়:img { width: 800px; }।✨ Show Answer (উত্তর দেখুন)
ans2.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Fluid Image</title></head> <body> <img src="https://via.placeholder.com/800x300" alt="Sample"> </body> </html>style.cssimg { max-width: 100%; height: auto; display: block; } -
Explain, in two sentences, why mobile-first CSS typically uses fewer override rules than desktop-first CSS.দুই বাক্যে ব্যাখ্যা করুন, mobile-first CSS-এ desktop-first-এর চেয়ে সাধারণত কম override নিয়ম কেন লাগে।
✨ Show Answer (উত্তর দেখুন)
Answer: Mobile-first base styles are already simple and stacked, so growth is additive — you only add rules when extra space unlocks new possibilities. Desktop-first base styles assume a complex wide layout, so shrinking to mobile requires actively undoing or overriding many of those rules.
Mobile-first-এর বেস স্টাইল আগে থেকেই সরল ও স্তূপাকার (stacked) থাকে, তাই বৃদ্ধি additive — অতিরিক্ত জায়গা পেলে তখনই নতুন নিয়ম যোগ হয়। Desktop-first-এর বেস স্টাইল জটিল, চওড়া লেআউট ধরে নেয়, তাই মোবাইলে সংকুচিত করতে সেই নিয়মগুলোর অনেকটাই সক্রিয়ভাবে override করতে হয়।
-
Use
clamp()to make a paragraph's font-size scale between 1rem and 1.4rem.clamp()ব্যবহার করে একটি paragraph-এর font-size ১rem থেকে ১.৪rem-এর মধ্যে স্কেল করান।✨ Show Answer (উত্তর দেখুন)
ans4.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Clamp Text</title></head> <body> <p>This paragraph scales smoothly with the viewport width.</p> </body> </html>style.cssp { font-size: clamp(1rem, 2vw + 0.5rem, 1.4rem); font-family: sans-serif; } -
Write a media query that switches a 3-column grid to a single column when the viewport is 480px wide or narrower.এমন একটি মিডিয়া কোয়েরি লিখুন যা viewport ৪৮০ পিক্সেল বা তার কম চওড়া হলে ৩-কলাম গ্রিডকে একক কলামে বদলে দেয়।
✨ Show Answer (উত্তর দেখুন)
ans5.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Grid Breakpoint</title></head> <body> <div class="grid"> <div>1</div><div>2</div><div>3</div> </div> </body> </html>style.css.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid div { background: #e6f4e8; padding: 14px; text-align: center; font-family: sans-serif; } @media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
Summary — Module 18
Responsive design means writing one set of HTML and CSS that adapts to any screen. Mobile-first CSS
starts small and grows with min-width media queries. Fluid images (max-width: 100%)
and clamp() typography let layouts and text scale smoothly between breakpoints, and DevTools
device mode lets you verify all of it without owning every physical device.
min-width মিডিয়া কোয়েরি দিয়ে বাড়ে। Fluid ছবি (max-width: 100%) ও clamp() টাইপোগ্রাফি breakpoint-গুলোর মধ্যে লেআউট ও টেক্সটকে মসৃণভাবে স্কেল করতে দেয়, আর DevTools device mode দিয়ে সবকিছু ফিজিক্যাল ডিভাইস ছাড়াই যাচাই করা যায়।