Responsive Design & Media Queries
A responsive website looks great on phones, tablets, and desktops. Use media queries to apply different styles at different screen widths. The mobile-first approach starts with small screen styles, then adds @media (min-width) for larger screens. Relative units like %, vw, and rem help elements sca…
Appy Says…
Over 60% of web traffic is on mobile. If your site looks broken on a phone, most of your users have already left. Responsive design with media queries fixes this — one codebase, every screen size.
What is Responsive CSS?
Responsive design means your layout adapts to different screen sizes. CSS media queries apply styles only when conditions (like screen width) are met.
- •Syntax:
@media (max-width: 768px) { /* mobile styles */ } - •Mobile-first: write base styles for small screens, then use
min-widthto enhance for larger ones - •Common breakpoints:
480px(phone),768px(tablet),1024px(laptop),1280px(desktop) - •
max-width: 100%on images — prevents them overflowing containers - •
min-widthin media queries = mobile-first;max-width= desktop-first - •Fluid units:
%,vw(viewport width),rem— scale with the screen
Think of it like a Roblox UI that adapts to device
Roblox's UI looks different on PC, tablet, and mobile — the same game adapts its interface to each screen. Responsive CSS does the same for websites: one set of rules that automatically adjusts based on where it's being viewed.
How It Works
- •1. Set the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"> - •2. Write base styles for mobile first (small screens)
- •3. Add
@media (min-width: 768px) { ... }to override for tablet+ - •4. Add
@media (min-width: 1024px) { ... }for desktop - •5. Test in DevTools: toggle device toolbar (Ctrl+Shift+M) to simulate different screen sizes
- •6. Use CSS Grid or Flexbox with wrapping for naturally responsive layouts
Real-World Examples
- •Mobile: single column stack; tablet+: two columns; desktop: three columns via media queries
- •Navigation: mobile = hamburger menu; desktop = horizontal navbar
- •Font size:
clamp(16px, 2.5vw, 22px)scales between min and max with screen - •Tailwind CSS uses mobile-first classes:
sm:flex-rowapplies only on small screens and above
Key Facts
- •Google uses mobile-first indexing — your mobile site is what gets ranked
- •
clamp(min, preferred, max)creates fluid sizing without media queries - •CSS Container Queries (new!) let you style based on the parent container's width, not the viewport
- •Tailwind, Bootstrap, and all major frameworks are built mobile-first
Watch Out!
Don't set fixed width: 500px on elements — they'll overflow on narrow screens. Use max-width: 500px; width: 100%; instead. Always design mobile-first — it's easier to add features for larger screens than to strip them away.
Remember
Mobile-first: base styles for small, then @media (min-width: ...)} for larger. Always include the viewport meta tag. Test in DevTools at 375px (iPhone width).
What You Learned
- •Media queries apply styles at specific screen widths:
@media (min-width: 768px) { ... } - •Mobile-first: write for small screens, enhance for large with min-width queries
- •Unlocks: sites that work on every device, passing Google's mobile-first index
Key Facts
- →Google uses mobile-first indexing — your mobile site is what gets ranked
- →
clamp(min, preferred, max)creates fluid sizing without media queries - →CSS Container Queries (new!) let you style based on the parent container's width, not the viewport
- →Tailwind, Bootstrap, and all major frameworks are built mobile-first
Real-World Examples
Remember
Mobile-first: base styles for small, then @media (min-width: ...)} for larger. Always include the viewport meta tag. Test in DevTools at 375px (iPhone width).
Quick Quiz
What does @media (min-width: 768px) mean?