Web Fundamentals: Responsive Design

Site Admin · 11 Sep 2026 · 7 views

Design for Every Screen

People browse on phones, tablets, laptops, and ultrawide monitors. Responsive design makes one set of HTML and CSS adapt to all of them. The classic workflow starts with a mobile layout and then enhances it for larger screens, an approach called mobile-first.

The Viewport Meta Tag

Without the viewport configuration, mobile browsers render a desktop-width page zoomed out. Adding one meta tag fixes the width so your CSS media queries behave.

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

This tells the browser to use the device width as the layout width and to start at 100% zoom.

Media Queries

A media query applies CSS only when a condition is true, usually a minimum width. This lets you switch layouts at breakpoints.

.grid {
    display: block;
}

@media (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

Below 768px, the items stack as blocks. At 768px and above, they arrange into two columns. min-width queries follow the mobile-first pattern: start simple, add complexity as space appears.

Flexible Sizing and Images

Fixed pixel widths overflow small screens. Prefer percentages, fr units, viewport units, and relative font sizes such as em or rem. Images need upper bounds so they shrink instead of bursting out of their container.

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

max-width 100% keeps images inside their parent, and height auto preserves the aspect ratio. The container pattern keeps long lines of text from stretching across huge monitors, which is more comfortable to read.

Test on Real Sizes

Browser developer tools include a device toolbar that simulates common phone and tablet widths. Check your pages at 360px, 768px, and 1280px at minimum. Responsive layout is not about specific devices but about graceful behavior at every width.