Responsive Web Design

The need for responsiveness

People visit websites on screens of every size — wide desktop monitors, laptops, tablets, and small phones. A page designed only for a large screen becomes hard to use on a phone: text is tiny, columns overflow, and the user must pinch and scroll sideways. Responsive web design is the approach of building a single page that automatically adjusts its layout, sizes, and spacing to look good and be usable on any screen size, rather than building separate pages for each device.

The viewport meta tag

The first step to a responsive page is telling the browser to use the device's real width. This is done with the viewport meta tag in the <head>:

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

width=device-width makes the page match the width of the device's screen, and initial-scale=1.0 sets the starting zoom to normal. Without this tag, a phone pretends to be a wide desktop and shrinks the whole page, defeating any responsive styling.

Relative units instead of fixed pixels

Fixed sizes in pixels (width: 960px) do not adapt. Responsive design prefers relative units that scale with the screen or the surrounding text:

• Percentages (%) — a size relative to the parent element; width: 50% is always half the container, whatever its size.
• em / rem — sizes relative to font size, useful for spacing and text that scales together.
• vw / vh — a percentage of the viewport's width/height.

Media queries

The heart of responsive design is the media query — a CSS feature that applies a block of style rules only when a condition about the screen is true, most commonly its width. This lets a page use one layout on wide screens and a different one on narrow screens:

/* default: two columns side by side on wider screens */
.column {
  width: 50%;
  float: left;
}

/* on screens 600px wide or narrower, stack them */
@media (max-width: 600px) {
  .column {
    width: 100%;
    float: none;
  }
}

Here, on a phone (600px or narrower) each .column becomes full width and the columns stack vertically instead of sitting side by side. The width at which the layout changes (600px here) is called a breakpoint.

Flexbox and flexible images

Flexbox (studied earlier) helps responsiveness because flex items can shrink, grow, and wrap onto new lines with flex-wrap: wrap;. Images are made flexible with a simple rule so they never overflow their container:

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