CSS Responsive Design

CSS responsive design means one page adapts to every screen, from small phones to wide monitors. The main tools are the viewport meta tag, flexible units, Flexbox and Grid, and media queries.

The Viewport Meta Tag

Without this tag, phones render the page at desktop width and zoom out. Every example in this tutorial already includes it in the head:

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

Media Queries

A media query applies rules only when a condition is true, such as a minimum width. Resize the editor output to see the color and layout change.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { font-family: sans-serif; background: #fee2e2; }
.cols { display: grid; gap: 10px; }
.cols div { background: white; padding: 20px; }
@media (min-width: 600px) {
  body { background: #dcfce7; }
  .cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  body { background: #dbeafe; }
  .cols { grid-template-columns: repeat(3, 1fr); }
}
</style>
</head>
<body>
<div class="cols"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>

Mobile-First Approach

• Write the base CSS for small screens first, with no media query
• Add min-width media queries to enhance the layout on larger screens
• Common breakpoints: 600px, 900px, 1200px, but choose them where your design breaks
• Test on real devices and in DevTools device mode

Fluid Images

max-width: 100% stops images from overflowing their container, and height: auto keeps the aspect ratio. Here an inline SVG stands in for a photo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
img { max-width: 100%; height: auto; display: block; }
.box { width: 60%; border: 2px solid #999; }
</style>
</head>
<body>
<div class="box">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'%3E%3Crect width='1200' height='400' fill='%2338bdf8'/%3E%3C/svg%3E" alt="Wide placeholder">
</div>
</body>
</html>

Frequently asked questions

What are the standard CSS breakpoints?

There is no official list. Many sites use about 600px, 900px and 1200px, but the best breakpoints are where your own layout starts to look wrong.

What is mobile-first CSS?

Writing default styles for small screens and using min-width media queries to add styles for larger screens.

Do I still need media queries with Flexbox and Grid?

Less often. flex-wrap, auto-fit grids and clamp() handle a lot automatically, but media queries are still useful for bigger layout changes.