JSTAcademy
0 XP
Dashboard
Crash Courses
Responsive Design & Media Queries
11 min
Masters+175 XP
Crash Courses · Masters

Responsive Design & Media Queries

Build layouts that adapt from mobile to desktop using breakpoints.
11 min read+175 XP on completionCert: HTML & CSS Crash Course
Tap any word in the text below to start reading from there.

Responsive Design & Media Queries

Your users access the web on phones, tablets, laptops, and large displays. Responsive design means one HTML, all screen sizes.

The Viewport Meta Tag

Required in every HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, mobile browsers display at ~980px wide and zoom out.

Mobile-First Breakpoints

/* Mobile base */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Tablet */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

Relative Units

font-size: 1rem;     /* 16px — respects user font-size preference */
font-size: 1.25rem;  /* 20px */
height: 100vh;       /* full viewport height */
width: 50%;          /* half of parent */

/* Fluid font — scales with viewport, clamped to min/max */
font-size: clamp(1rem, 2.5vw, 1.5rem);

Responsive Images

img { max-width: 100%; height: auto; }

Always include in your CSS reset. Prevents images from overflowing their container.

0%