Responsive Web Design

CSS Responsive Web Design

Responsive web design allows a web page to adapt to different screen and viewport sizes. Flexible layouts, responsive images, relative sizing, and media queries work together to keep content readable and usable on phones, tablets, laptops, and desktop displays.

What is Responsive Web Design?

Responsive web design is an approach to building web pages so their content and layout adapt to the available space. Instead of creating a separate page for every screen size, the same HTML can be styled to work across a wide range of devices and viewport sizes.

A responsive page commonly combines flexible layouts, flexible images, and CSS media queries. Flexbox and Grid can provide layouts that adjust naturally, while media queries can make additional changes when the available space reaches a point where the design needs to change.

Setting the Viewport

Responsive pages should include a viewport <meta> element in the document <head>. It tells mobile browsers to use the device's viewport width when laying out the page.

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

The width=device-width setting makes the layout viewport correspond to the device width, while initial-scale=1.0 sets the initial zoom level.

Flexible Layouts

Responsive layouts should be able to adjust as the available width changes. Flexbox and Grid can create flexible layouts without relying entirely on fixed pixel widths.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

The fr unit divides available space among the columns. Flexible sizing can help a layout adapt before a media query is needed.

Responsive Images

Images can be prevented from overflowing their containers by allowing them to shrink when necessary.

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

The max-width: 100%; declaration prevents the image from becoming wider than its containing element, while height: auto; preserves its aspect ratio as its displayed width changes.

HTML also provides the <picture> element and the srcset and sizes attributes for situations where different image resources should be selected for different conditions or display sizes.

Relative Sizing

Relative CSS units can help content respond to its surroundings. Percentages, rem, em, and viewport units can be useful alternatives to fixed dimensions when flexible sizing is appropriate.

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

This container uses most of the available width on smaller screens but stops growing when it reaches 1200 pixels.

Responsive design does not require every measurement to use a relative unit. Fixed and relative units can be combined according to what each part of the design needs.

Using Media Queries

Media queries allow specific CSS rules to be applied when conditions such as viewport width are met.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

The cards appear in one column by default. At a viewport width of 700 pixels or wider, the layout changes to three columns.

Mobile-First Design

A mobile-first approach begins with styles that work at narrower viewport widths. Media queries using min-width can then add or change styles as more space becomes available.

.navigation {
  display: block;
}

@media (min-width: 768px) {
  .navigation {
    display: flex;
  }
}

This approach starts with the simpler narrow-screen layout and enhances it for wider viewports.

Choosing Breakpoints

Responsive breakpoints should be chosen where the content or layout needs to change rather than solely around the dimensions of specific devices.

For example, if three columns become too narrow for their content, a breakpoint can change them to two columns or one column. The appropriate breakpoint depends on the design and content being displayed.

Putting It Together

A basic responsive layout can combine a flexible container, CSS Grid, responsive images, and a media query.

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

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

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

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

The layout begins with one column, allows images to scale within their containers, and changes to three columns when enough horizontal space becomes available.

Try Responsive Web Design

Drag the divider between the code and result panes to change the preview width. Watch the cards change from one column to three columns when the preview reaches the media query breakpoint.

Testing Responsive Pages

Responsive pages should be tested at a variety of viewport widths rather than only at the exact breakpoints used in the CSS. Slowly resizing the browser can reveal widths where text, navigation, images, or other content no longer fit comfortably.

Browser developer tools can simulate many viewport sizes, but testing on actual phones, tablets, and desktop displays can also help identify differences in how a page behaves in real use.

Summary

Responsive web design combines flexible layouts, responsive images, appropriate sizing, and media queries to create pages that adapt to different viewport sizes. The viewport meta element helps mobile browsers use the intended layout width, while Flexbox, Grid, and media queries provide tools for adjusting the page as the available space changes.

With these techniques, one HTML document can provide a usable layout across a wide range of screen sizes without requiring separate versions of the page.