Lesson 18 of 55 · HTML
Responsive Design – Meta Viewport and Media Queries
Duration: 9 min
Building for All Screens
Meta viewport
<meta name='viewport' content='width=device-width, initial-scale=1' />
Ensures the page scales correctly on mobile devices and prevents the browser from zooming out to fit the entire page.
Media queries
@media (max-width: 600px) {
.sidebar { display: none; }
.content { margin: 0; }
}
Combine media queries with Flexbox or CSS Grid to adapt layouts fluidly.
Mobile‑first strategy
Start with base styles for the smallest screens, then add @media (min-width: …) rules for larger breakpoints. This approach loads only the essential CSS first and reduces unnecessary overrides.
Common breakpoints (adjust to your audience)
- 320 px – Small phones
- 480 px – Large phones
- 768 px – Tablets
- 1024 px – Small laptops
- 1280 px – Desktops
Responsive units
rem– Relative to the root font size; good for scalable typography.vw/vh– 1 % of the viewport width/height.%– Relative to the parent element.
Quick checklist for responsive design
<meta name='viewport'>present? ✅- Base styles target mobile first? ✅
- Media queries use
min-widthfor larger screens? ✅ - Layout built with Flexbox/Grid, not floats? ✅
- No fixed‑pixel widths for major layout containers? ✅
Tip: Test your layouts with Chrome DevTools → Device Toolbar to emulate various screen sizes.