Responsive Design

Responsive Design View

Use the developer tools to test how your
site looks on different device sizes.

Tell the browser you got dis

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

This prevents the browser from just using
the desktop version and zooming it out.

Your site should now be zoomed in on mobile.

Use percentages for widths

.container {
  width: 100%;
}

This lets you maximise screen use on mobile.

Your main content box should resize with the browser.

Use a max width to limit size

.container {
  width: 100%;
  max-width: 800px;
}

Combining a pixel max-width and a percentage width
gives you full-width on mobile and limited width on desktop.

Your main content size should be limited on large screens.

Use view-relative sizing for heights

.header {
  height: 60vh;
}

The vh measurement is like %, but it’s a percentage
of the view height not the container height.

Your header box should resize as the browser height changes.

Use view-relative sizing for text

.title {
  font-size: 30vh;
}

The vh and vw units can also be used
for font sizes, instead of using pixels.

Your page title should resize as the browser height changes.

Use FlexBox for any kind of column layout

A container with its display set to flex
automatically sizes elements inside it to fit.

FlexBox navigation bar

.main-nav {
  display: flex;
}

.main-nav a {
  width: 200px;
}

.main-nav .title {
  flex: 1;
}

Your title should be on the left, and links on the right.

FlexBox content panels

.panels-container {
  display: flex;
}

.panel {
  flex: 1;
}

Your panels should now be horizontal and equally sized.

What we learned

• Percentage widths
• View-relative heights
• View-relative font sizes
• FlexBox layouts