As the number of mobile phone users on the internet increases, it has become more and more important for web designers to lay out content in ways that work well for a variety of screen sizes. Responsive web design, originally defined by Ethan Marcotte in A List Apart, is a design strategy that responds to users' needs and their devices' capabilities by changing a site's layout to suit the device being used. For example, a responsive site might show content in a single-column view on a phone, two columns on a tablet, and three or four columns on a desktop computer.
Because internet-capable devices have so many possible screen sizes, it's important for your site to adapt to any existing or future screen size. Modern responsive design also accounts for modes of interaction such as touch screens. The goal is to optimize the experience for everyone.
Set the viewport
Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. This tag tells the browser how to control the page's dimensions and scaling.
To try to provide the best experience, mobile browsers render the page at a
desktop screen width (usually about 980px, though this varies across devices),
and then try to make the content look better by increasing font sizes and
scaling the content to fit the screen. This can make fonts look inconsistent and
require users to zoom in to see and interact with the content.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Using the meta viewport value width=device-width tells the page to match the
screen's width in device-independent pixels (DIP), a standard visual pixel unit
(which can be made up of many physical pixels on a high-density screen). This
lets the page reflow content to match different screen sizes.
Some browsers keep the
page's width constant when rotating to landscape mode, and zoom to fill the
screen instead of reflowing. Adding the value initial-scale=1 tells browsers
to set a 1:1 relationship between CSS pixels and device-independent pixels
regardless of device orientation, letting the page take advantage of the full
landscape width.
The Does not have a <meta name="viewport"> tag with width or initial-scale
Lighthouse audit can help you automate the process of making sure your HTML
documents use the viewport meta tag correctly.
Size content to the viewport
On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally. Forcing the user to scroll horizontally or to zoom out to see the whole page causes a poor user experience.
When developing a mobile site with a meta viewport tag, it's common to accidentally create page content that doesn't quite fit within the specified viewport. For example, an image displayed wider than the viewport can cause horizontal scrolling. To prevent this, adjust your content to fit inside the viewport.
The Content is not sized correctly for the viewport Lighthouse audit can help you automate the process of detecting overflowing content.
Images
An image with fixed dimensions causes the page to scroll if it's larger than the
viewport. We recommend giving all images a max-width of 100%, which shrinks
images to fit the available space while preventing them from stretching beyond
their initial size.
In most cases, you can do this by adding the following to your style sheet:
img {
max-width: 100%;
display: block;
}
Add the dimensions of the image to the img element
Even when you set max-width: 100%, we still recommend adding width and
height attributes to your <img> tags so the browser can reserve space for
images before they load. This helps prevent layout shifts.
Layout
Because screen dimensions and width in CSS pixels vary widely between devices (for example, between phones and tablets, and even between different phones), content shouldn't rely on a particular viewport width to render well.
In the past, this required setting layout elements in percentages. Using pixel measurements requires the user to scroll horizontally on small screens: