Responsive web design basics | Articles

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/responsive-web-design-basics"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/articles/responsive-web-design-basics" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/responsive-web-design-basics" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/responsive-web-design-basics?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/responsive-web-design-basics?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/responsive-web-design-basics?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/responsive-web-design-basics?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/responsive-web-design-basics?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/responsive-web-design-basics?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/responsive-web-design-basics?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/responsive-web-design-basics?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/responsive-web-design-basics?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/responsive-web-design-basics?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/responsive-web-design-basics?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/responsive-web-design-basics?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/responsive-web-design-basics?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/responsive-web-design-basics?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/responsive-web-design-basics?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/responsive-web-design-basics?hl=ru" /><link rel="alternate" hreflang="es" href="https://web.dev/articles/responsive-web-design-basics?hl=es" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/responsive-web-design-basics?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/responsive-web-design-basics?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/responsive-web-design-basics?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/responsive-web-design-basics?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/responsive-web-design-basics" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=ru" /><link rel="alternate" hreflang="es-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=es" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/responsive-web-design-basics?hl=vi" /><title>Responsive web design basics  |  Articles  |  web.dev</title> <meta property="og:title" content="Responsive web design basics  |  Articles  |  web.dev"><meta name="description" content="Create sites that respond to the needs and capabilities of the device they&#39;re viewed on."> <meta property="og:description" content="Create sites that respond to the needs and capabilities of the device they&#39;re viewed on."><meta property="og:url" content="https://web.dev/articles/responsive-web-design-basics"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2019-02-12", "headline": "Responsive web design basics" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Responsive web design basics", "item": "https://web.dev/articles/responsive-web-design-basics" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Articles" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Articles" > Articles </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Responsive web design basics </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Pete LePage" src="https://web.dev/images/authors/petelepage.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Pete LePage </span> <div class="wd-author__links"> <a href="https://twitter.com/petele" aria-label="Pete LePage on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/petele" aria-label="Pete LePage on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@petele" aria-label="Pete LePage on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> <a href="https://techhub.social/@petele" aria-label="Pete LePage on Mastodon" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"> <title>Mastodon</title> <path fill="currentColor" d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z" style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"></path> </svg></a> <a href="https://petelepage.com/" aria-label="Pete LePage's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Rachel Andrew" src="https://web.dev/images/authors/rachelandrew.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Rachel Andrew </span> <div class="wd-author__links"> <a href="https://twitter.com/rachelandrew" aria-label="Rachel Andrew on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/rachelandrew" aria-label="Rachel Andrew on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://www.linkedin.com/in/rachelandrew" aria-label="Rachel Andrew on LinkedIn" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 200 200"> <title>LinkedIn</title> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </svg></a> <a href="https://front-end.social/@rachelandrew" aria-label="Rachel Andrew on Mastodon" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"> <title>Mastodon</title> <path fill="currentColor" d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z" style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"></path> </svg></a> <a href="https://rachelandrew.co.uk" aria-label="Rachel Andrew's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <aside class="note"><strong>Note:</strong><span> For a deeper dive into responsive web design, see our <a href="/learn/design">Learn Design</a> course.</span></aside> <p>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 href="http://alistapart.com/article/responsive-web-design/">A List Apart</a>, 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.</p> <figure> <video autoplay controls loop muted playsinline > <source src="/static/articles/responsive-web-design-basics/video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4" type="video/mp4" /> </video> <figcaption class="wd-caption">As the screen gets wider, the widget changes shape in response.</figcaption> </figure> <p>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.</p> <h2 id="viewport" data-text="Set the viewport" tabindex="-1">Set the viewport</h2> <p>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.</p> <p>To try to provide the best experience, mobile browsers render the page at a desktop screen width (usually about <code translate="no" dir="ltr">980px</code>, 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.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Matlab"><code translate="no" dir="ltr"><<span class="devsite-syntax-sx">!DOCTYPE html</span>> <<span class="devsite-syntax-n">html</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s">lang="en"</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span>… <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-n">meta</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">name</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"viewport"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">content</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"width=device-width, initial-scale=1"</span>> <span class="devsite-syntax-w"> </span>… <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span>… </code></pre></devsite-code> <p>Using the meta viewport value <code translate="no" dir="ltr">width=device-width</code> 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.</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-page-the-t-faa09126e69d.png" alt="Screenshot of a page with the text hard to read because it's very zoomed out." width="500" height="640"> <figcaption class="wd-caption"> A page without the viewport meta tag loads very zoomed out, making the text hard to read. <a href="https://without-vp-meta.glitch.me/">See this example on Glitch</a>. </figcaption> </figure> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-the-same-page-9ac43367e5e0c.png" alt="Screenshot of the same page with the text at a size that can be read." width="500" height="888"> <figcaption class="wd-caption"> With the viewport meta tag set, you can read the page without zooming in. <a href="https://with-vp-meta.glitch.me/">See this example on Glitch</a>. </figcaption> </figure> <p><a href="https://css-tricks.com/probably-use-initial-scale1/">Some browsers</a> keep the page's width constant when rotating to landscape mode, and zoom to fill the screen instead of reflowing. Adding the value <code translate="no" dir="ltr">initial-scale=1</code> 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.</p> <aside class="caution"><strong>Caution:</strong><span> To ensure that older browsers can properly parse the attributes, use a comma to separate attributes.</span></aside> <p>The <a href="https://developer.chrome.com/docs/lighthouse/pwa/viewport">Does not have a <code translate="no" dir="ltr"><meta name="viewport"></code> tag with <code translate="no" dir="ltr">width</code> or <code translate="no" dir="ltr">initial-scale</code></a> Lighthouse audit can help you automate the process of making sure your HTML documents use the viewport meta tag correctly.</p> <aside class="caution"><strong>Caution:</strong><span> In addition to <code translate="no" dir="ltr">initial-scale</code>, the <code translate="no" dir="ltr">minimum-scale</code>, <code translate="no" dir="ltr">maximum-scale</code>, and <code translate="no" dir="ltr">user-scalable</code> attributes are also available. We don't recommend using these attributes because they can prevent the user from zooming the viewport, potentially causing accessibility issues.</span></aside> <h2 id="size-content" data-text="Size content to the viewport" tabindex="-1">Size content to the viewport</h2> <p>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.</p> <p>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.</p> <p>The <a href="https://developer.chrome.com/docs/lighthouse/pwa/content-width">Content is not sized correctly for the viewport</a> Lighthouse audit can help you automate the process of detecting overflowing content.</p> <h3 id="images" data-text="Images" tabindex="-1">Images</h3> <p>An image with fixed dimensions causes the page to scroll if it's larger than the viewport. We recommend giving all images a <code translate="no" dir="ltr">max-width</code> of <code translate="no" dir="ltr">100%</code>, which shrinks images to fit the available space while preventing them from stretching beyond their initial size.</p> <p>In most cases, you can do this by adding the following to your style sheet:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">img</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">max-width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">display</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">block</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <h4 id="image-dimensions" data-text="Add the dimensions of the image to the img element" tabindex="-1">Add the dimensions of the image to the img element</h4> <p>Even when you set <code translate="no" dir="ltr">max-width: 100%</code>, we still recommend adding <code translate="no" dir="ltr">width</code> and <code translate="no" dir="ltr">height</code> attributes to your <code translate="no" dir="ltr"><img></code> tags so the browser can reserve space for images before they load. This helps prevent <a href="/articles/optimize-cls">layout shifts</a>.</p> <h3 id="layout" data-text="Layout" tabindex="-1">Layout</h3> <p>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.</p> <p>In the past, this required setting layout elements in percentages. Using pixel measurements requires the user to scroll horizontally on small screens:</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67.jpg" alt="Screenshot of a two-column layout with most of the second column outside the viewport" width="800" height="504" srcset="https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_36.jpg 36w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_48.jpg 48w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_72.jpg 72w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_96.jpg 96w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_480.jpg 480w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_720.jpg 720w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_856.jpg 856w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_960.jpg 960w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_1440.jpg 1440w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_1920.jpg 1920w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> A floated layout using pixels. <a href="https://layout-floats-px.glitch.me/">See this example on Glitch</a>. </figcaption> </figure> <p>Using percentages instead makes the columns narrower on smaller screens, because each column always takes up the same percentage of the screen width:</p> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/layout-floats-percent?attributionHidden=true&sidebarCollapsed=true&path=README.md&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="layout-floats-percent on Glitch" ></iframe> </div> <p>Modern CSS layout techniques such as Flexbox, Grid Layout, and Multicol make creating these flexible grids much easier.</p> <h4 id="flexbox" data-text="Flexbox" tabindex="-1">Flexbox</h4> <p>Use Flexbox when you have a set of items of different sizes and you want them to fit comfortably in a row or multiple rows, with smaller items taking up less space and larger ones taking more space.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">items</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">display</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">flex</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">justify-content</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">space-between</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>You can use Flexbox to display items as a single row, or wrapped onto multiple rows as the available space decreases.</p> <div class="wd-embed" style="height: 220px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/responsive-flexbox?attributionHidden=true&sidebarCollapsed=true&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="responsive-flexbox on Glitch" ></iframe> </div> <p><a href="https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox">Read more about Flexbox</a>.</p> <h4 id="grid" data-text="CSS Grid Layout" tabindex="-1">CSS Grid Layout</h4> <p>CSS Grid Layout creates flexible grids. You can improve the earlier floated example using use grid layout and the <code translate="no" dir="ltr">fr</code> unit, which represents a portion of the available space in the container.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">container</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">display</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">grid</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">grid-template-columns</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">1</span><span class="devsite-syntax-n">fr</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">3</span><span class="devsite-syntax-n">fr</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/two-column-grid?attributionHidden=true&sidebarCollapsed=true&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="two-column-grid on Glitch" ></iframe> </div> <p>You can also use Grid Layout to create regular grid layouts with as many items as can fit. The number of available tracks is reduced as the screen size decreases. The following demo shows a grid containing as many cards as fit on each row, with a minimum size of <code translate="no" dir="ltr">200px</code>.</p> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/grid-as-many-as-fit?attributionHidden=true&sidebarCollapsed=true&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="grid-as-many-as-fit on Glitch" ></iframe> </div> <p><a href="https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids">Read more about CSS Grid Layout</a></p> <h4 id="multicol" data-text="Multiple-column layout" tabindex="-1">Multiple-column layout</h4> <p>For some types of layout, you can use Multiple-column Layout (Multicol), which creates responsive numbers of columns with the <code translate="no" dir="ltr">column-width</code> property. In the following demo, the page adds columns when there's room for another <code translate="no" dir="ltr">200px</code> column.</p> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/responsive-multicol?attributionHidden=true&sidebarCollapsed=true&path=style.css&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="responsive-multicol on Glitch" ></iframe> </div> <p><a href="https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Read more about Multicol</a></p> <h2 id="media-queries" data-text="Use CSS media queries for responsiveness" tabindex="-1">Use CSS media queries for responsiveness</h2> <p>Sometimes you might need to make more extensive changes to your layout to support certain screen sizes than the techniques described previously allow. This is where media queries become useful.</p> <p>Media queries are simple filters that you can apply to CSS styles, to change those styles based on the types of device rendering the content. They can also change styling based on device features including width, height, orientation, and whether the device is being used as a touchscreen.</p> <p>To provide different styles for printing, you can target an output type and include a style sheet for print styles:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Matlab"><code translate="no" dir="ltr"><<span class="devsite-syntax-sx">!DOCTYPE html</span>> <<span class="devsite-syntax-n">html</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s">lang="en"</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span>… <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-n">link</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">rel</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"stylesheet"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">href</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"print.css"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">media</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"print"</span>> <span class="devsite-syntax-w"> </span>… <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span>… </code></pre></devsite-code> <p>You can also use a media query to include print styles in your main style sheet:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">print</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c">/* print styles go here */</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code><aside class="note"><strong>Note:</strong><span> You can also include separate stylesheets in your main CSS file using the <code translate="no" dir="ltr">@import</code> syntax, <code translate="no" dir="ltr">@import url(print.css) print;</code>. However, we don't recommend this for performance reasons. See <a href="/articles/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports">Avoid CSS imports</a> for more details.</span></aside> <p>For responsive web design, the most common queries are for device features, so you can customize your layout for touchscreens or smaller screens.</p> <h3 id="viewport-media-queries" data-text="Media queries based on viewport size" tabindex="-1">Media queries based on viewport size</h3> <p>Media queries let you create a responsive experience that applies specific styles to specific screen size. Queries for screen size can test for the following things:</p> <ul> <li><code translate="no" dir="ltr">width</code> (<code translate="no" dir="ltr">min-width</code>, <code translate="no" dir="ltr">max-width</code>)</li> <li><code translate="no" dir="ltr">height</code> (<code translate="no" dir="ltr">min-height</code>, <code translate="no" dir="ltr">max-height</code>)</li> <li><code translate="no" dir="ltr">orientation</code></li> <li><code translate="no" dir="ltr">aspect-ratio</code></li> </ul> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/media-queries-size?attributionHidden=true&sidebarCollapsed=true&path=index.html&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="media-queries-size on Glitch" ></iframe> </div> <p>All of these features have excellent browser support. For more details, including browser support information, see <a href="https://developer.mozilla.org/docs/Web/CSS/@media/width">width</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/@media/height">height</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/@media/orientation">orientation</a>, and <a href="https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a> on MDN.</p> <aside class="note"><strong>Note:</strong><span> Queries for <code translate="no" dir="ltr">device-width</code> and <code translate="no" dir="ltr">device-height</code> have been deprecated because the size of the device window doesn't necessarily represent the size of the active viewport, for example if the user has resized a browser window.</span></aside> <h3 id="capability-media-queries" data-text="Media queries based on device capability" tabindex="-1">Media queries based on device capability</h3> <p>Given the range of devices available, developers can't assume that every large device is a regular desktop or laptop computer, or that every small device uses a touchscreen. Some newer additions to the media queries specification let you test for features such as the type of pointer used to interact with the device and whether the user can hold a pointer over elements.</p> <ul> <li><code translate="no" dir="ltr">hover</code></li> <li><code translate="no" dir="ltr">pointer</code></li> <li><code translate="no" dir="ltr">any-hover</code></li> <li><code translate="no" dir="ltr">any-pointer</code></li> </ul> <p>Try viewing this demo on different devices, such as a regular desktop computer and a phone or tablet.</p> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/media-query-pointer?attributionHidden=true&sidebarCollapsed=true&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="media-query-pointer on Glitch" ></iframe> </div> <p>These newer features have good support in all modern browsers. Find out more on the MDN pages for <a href="https://developer.mozilla.org/docs/Web/CSS/@media/hover">hover</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/@media/any-hover">any-hover</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/@media/pointer">pointer</a>, and <a href="https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer">any-pointer</a>.</p> <h4 id="any-hover-any-pointer" data-text="Use any-hover and any-pointer" tabindex="-1">Use <code translate="no" dir="ltr">any-hover</code> and <code translate="no" dir="ltr">any-pointer</code></h4> <p>The features <code translate="no" dir="ltr">any-hover</code> and <code translate="no" dir="ltr">any-pointer</code> test if the user can hold a pointer over elements (often called <em>hovering</em>), or use a pointer at all, even if it's not the primary way they interact with their device. Be very careful when using these, for example to avoid forcing a touchscreen user to switch to a mouse. However, <code translate="no" dir="ltr">any-hover</code> and <code translate="no" dir="ltr">any-pointer</code> can be useful if it's important to determine what kind of device a user has. For example, a laptop with a touchscreen and trackpad should match coarse and fine pointers, in addition to the ability to hover.</p> <h2 id="breakpoints" data-text="How to choose breakpoints" tabindex="-1">How to choose breakpoints</h2> <p>Don't define breakpoints based on device classes, or any product, brand name, or operating system. This makes your code difficult to maintain. Instead, let the content determine how its layout changes to fit the container.</p> <h3 id="major-breakpoints" data-text="Pick major breakpoints by starting small, then working up" tabindex="-1">Pick major breakpoints by starting small, then working up</h3> <p>Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary. This lets you minimize the number of breakpoints on your page and optimize them based on content.</p> <p>The following example walks through the weather forecast widget example at the beginning of this page. The first step is to make the forecast look good on a small screen:</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-weather-app-8807746eddfbe.png" alt="Screenshot of a weather app at a mobile width" width="400" height="667"> <figcaption class="wd-caption"> The app at a narrow width. </figcaption> </figure> <p>Next, resize the browser until there's too much whitespace between the elements to make the widget look good. The decision is subjective, but more than <code translate="no" dir="ltr">600px</code> is certainly too wide.</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-weather-app-236b1e89bc871.png" alt="Screenshot of a weather app with wide gaps between items" width="400" height="240"> <figcaption class="wd-caption"> At this size, the app's layout should probably change. </figcaption> </figure> <p>To insert a breakpoint at <code translate="no" dir="ltr">600px</code>, create two media queries at the end of your CSS for the component: one to use when the browser is <code translate="no" dir="ltr">600px</code> or narrower, and one for when it's wider than <code translate="no" dir="ltr">600px</code>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">max-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">600px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">601px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>Finally, refactor the CSS. Inside the media query for a <code translate="no" dir="ltr">max-width</code> of <code translate="no" dir="ltr">600px</code>, add the CSS which is only for small screens. Inside the media query for a <code translate="no" dir="ltr">min-width</code> of <code translate="no" dir="ltr">601px</code> add CSS for larger screens.</p> <h4 id="minor-breakpoints" data-text="Pick minor breakpoints when necessary" tabindex="-1">Pick minor breakpoints when necessary</h4> <p>In addition to choosing major breakpoints when layout changes significantly, it's also helpful to adjust for minor changes. For example, between major breakpoints it can be helpful to adjust the margins or padding on an element, or increase the font size to make it feel more natural in the layout.</p> <p>This example follows the same pattern as the previous one, starting with optimizing smaller screen layouts. First, boost the font when the viewport width is greater than <code translate="no" dir="ltr">360px</code>. After that, when there's enough space, you can separate the high and low temperatures so they're on the same line, and make the weather icons larger.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">360px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">body</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">font-size</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1.0</span><span class="devsite-syntax-kt">em</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">500px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">seven-day-fc</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">temp-low</span><span class="devsite-syntax-o">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">seven-day-fc</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">temp-high</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">display</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">inline-block</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">45</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">seven-day-fc</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">seven-day-temp</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">margin-left</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">5</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">seven-day-fc</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">icon</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">64</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">64</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>For large screens, we recommend limiting the maximum width of the forecast panel so it doesn't use the whole screen width.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">700px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">weather-forecast</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">700</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/responsive-forecast?attributionHidden=true&sidebarCollapsed=true&path=style.css&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="responsive-forecast on Glitch" ></iframe> </div> <h3 id="optimize-text" data-text="Optimize text for reading" tabindex="-1">Optimize text for reading</h3> <p>Classic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English). Consider adding a breakpoint every time the width of a text block grows past about 10 words.</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-e1d8d10e2e41f.jpg" alt="Screenshot of a page of text on a mobile device" width="400" height="488"> <figcaption class="wd-caption"> Text on a mobile device. </figcaption> </figure> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d.jpg" alt="Screenshot of a a page of text on a desktop browser" width="800" height="377" srcset="https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_36.jpg 36w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_48.jpg 48w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_72.jpg 72w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_96.jpg 96w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_480.jpg 480w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_720.jpg 720w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_856.jpg 856w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_960.jpg 960w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_1440.jpg 1440w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_1920.jpg 1920w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> The same text in a desktop browser with a breakpoint added to constrain the line length. </figcaption> </figure> <p>In this example, the Roboto font at <code translate="no" dir="ltr">1em</code> produces 10 words per line on the smaller screen, but larger screens need a breakpoint. In this case, if the browser width is greater than <code translate="no" dir="ltr">575px</code>, the ideal content width is <code translate="no" dir="ltr">550px</code>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-width</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">575px</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">article</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">550</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">margin-left</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">auto</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">margin-right</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">auto</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <div class="wd-embed" style="height: 420px;"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi" loading="lazy" src="https://glitch.com/embed/#!/embed/rwd-reading?attributionHidden=true&sidebarCollapsed=true&path=index.html&previewSize=100" style="height: 100%; width: 100%; border: 0;" title="rwd-reading on Glitch" ></iframe> </div> <h3 id="avoid_hiding_content_avoid-hiding-content" data-text="Avoid hiding content (:#avoid-hiding-content)" tabindex="-1">Avoid hiding content (:#avoid-hiding-content)</h3> <p>Be careful when choosing what content to hide or show depending on screen size. Don't hide content just because you can't fit it on the screen. Screen size doesn't predict what a user might want to see. For example, removing the pollen count from the weather forecast could be a serious issue for springtime allergy sufferers who need that information to decide whether they can go outside.</p> <h2 id="devtools" data-text="View media query breakpoints in Chrome DevTools" tabindex="-1">View media query breakpoints in Chrome DevTools</h2> <p>After you set up your media query breakpoints, check how they affect your site's appearance. You could resize your browser window to trigger the breakpoints, but Chrome DevTools has a built-in feature that shows how a page looks under different breakpoints.</p> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a.png" alt="Screenshot of DevTools with our weather app open and a width of 822 pixels selected." width="800" height="522" srcset="https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_36.png 36w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_48.png 48w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_72.png 72w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_96.png 96w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_480.png 480w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_720.png 720w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_856.png 856w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_960.png 960w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_1440.png 1440w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_1920.png 1920w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> DevTools showing the weather app at a wider viewport size. </figcaption> </figure> <figure> <img src="/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db.png" alt="Screenshot of DevTools with our weather app open and a width of 436 pixels selected." width="800" height="521" srcset="https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_36.png 36w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_48.png 48w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_72.png 72w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_96.png 96w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_480.png 480w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_720.png 720w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_856.png 856w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_960.png 960w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_1440.png 1440w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_1920.png 1920w,https://web.dev/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> DevTools showing the weather app at a narrower viewport size. </figcaption> </figure> <p>To view your page under different breakpoints:</p> <ol> <li><a href="https://developer.chrome.com/docs/devtools/open">Open DevTools</a>.</li> <li>Turn on <a href="https://developer.chrome.com/docs/devtools/device-mode/#toggle">Device Mode</a>. This opens in <a href="https://developer.chrome.com/docs/devtools/device-mode/#responsive">responsive mode</a> by default.</li> <li>To see your media queries, open the Device Mode menu and select <a href="https://developer.chrome.com/docs/devtools/device-mode/#queries">Show media queries</a>. This shows your breakpoints as colored bars above your page.</li> <li>Click one of the bars to view your page while that media query is active. Right-click a bar to jump to that media query's definition.</li> </ol> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2019-02-12 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-02-12 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="i3EdM4Qo6aMZqtddNStFpmb9kWLj2A"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Concierge__enable_pushui","Experiments__reqs_query_experiments","Cloud__enable_cloudx_ping","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_public_developer_profiles","Search__enable_ai_eligibility_checks","Profiles__enable_profile_collections","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_free_trial_server_call","OnSwitch__enable","Profiles__require_profile_eligibility_for_signin","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_project_variables","BookNav__enable_tenant_cache_key","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloudx_experiment_ids","TpcFeatures__enable_required_headers","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_llm_concierge_chat","Profiles__enable_recognition_badges","Search__enable_suggestions_from_borg","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_shell","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_page_saving","Cloud__enable_cloud_facet_chat","DevPro__enable_developer_subscriptions","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__emergency_css","Analytics__enable_clearcut_logging","Search__enable_page_map","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_legacy_calculator_redirect","CloudShell__cloud_shell_button","CloudShell__cloud_code_overflow_menu","Profiles__enable_release_notes_notifications","Profiles__enable_awarding_url"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Responsive web design basics | Articles | web.dev