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…
60%+ of web traffic is mobile. If your site only looks good on desktop, you're already losing most of your users. Media queries let you apply different styles at different screen sizes — one codebase, every device.
What is Responsive CSS?
Responsive design uses CSS media queries to apply styles conditionally based on device characteristics like screen width, height, or orientation.
- •
@media (max-width: 768px) { ... } - •Mobile-first: write base styles for mobile, add
min-widthbreakpoints for larger - •Common breakpoints:
480px(sm),768px(md),1024px(lg),1280px(xl) - •
@media (orientation: landscape)— portrait vs landscape - •
@media (prefers-color-scheme: dark)— respect system dark mode - •Fluid values:
clamp(1rem, 2.5vw, 2rem) - •Always include:
<meta name="viewport" content="width=device-width, initial-scale=1">
Think of it like a Roblox game with mobile UI mode
Roblox detects whether you're on mobile and automatically shows bigger buttons and a different control scheme. Media queries let your CSS do the same — detect screen size and load the right styles automatically.
How It Works
- •1. Mobile-first: write styles for small screens as the base
- •2. Add breakpoints:
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } - •3. Test in DevTools (Ctrl+Shift+M) at common sizes: 375px, 768px, 1024px
- •4. Use flexible units:
%,rem,vw,frinstead of fixed px widths - •5.
max-width: 1200px; margin: 0 auto;— centre content, cap max width
Real-World Examples
- •Mobile: 1 column cards → tablet: 2 columns → desktop: 4 columns
- •Hamburger menu on mobile → horizontal nav on desktop
- •Smaller font on mobile:
font-size: 14px→@media (min-width: 768px) { 16px } - •Tailwind responsive:
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
Key Facts
- •Google uses mobile-first indexing — your mobile version is what gets ranked
- •CSS Container Queries (2023) apply styles based on parent width, not viewport
- •
clamp(min, val, max)creates fluid sizing without breakpoints - •Tailwind CSS is entirely mobile-first with breakpoint prefixes
Watch Out!
Fixed widths like width: 400px overflow narrow screens. Always pair fixed widths with max-width: max-width: 400px; width: 100%; — this adapts to any screen while capping the maximum.
Remember
Mobile-first: base = small screen. Add @media (min-width: ...) for bigger screens. Never forget the viewport meta tag.
What You Learned
- •Media queries apply styles at specific screen widths — write mobile-first
- •Fluid units (%, rem, vw, fr, clamp) adapt naturally without breakpoints
- •Unlocks: mobile-friendly sites, Google ranking, designs that work everywhere
Key Facts
- →Google uses mobile-first indexing — your mobile version is what gets ranked
- →CSS Container Queries (2023) apply styles based on parent width, not viewport
- →
clamp(min, val, max)creates fluid sizing without breakpoints - →Tailwind CSS is entirely mobile-first with breakpoint prefixes
Real-World Examples
Remember
Mobile-first: base = small screen. Add @media (min-width: ...) for bigger screens. Never forget the viewport meta tag.
Quick Quiz
What does @media (min-width: 768px) mean?