HTML Responsive Web Design

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices (desktops, tablets, and phones).

Setting The Viewport

To create a responsive website, you must include the following <meta> tag in all your web pages:

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

This sets the viewport of the page, which gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device, which will vary depending on the device. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Using Media Queries

Media queries are a feature of CSS that allows you to apply styles based on device characteristics, most commonly the viewport width. This allows you to apply different styles for mobile, tablet, and desktop screens.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

In this example, the background color of an element with the class "example" will change depending on the screen width.