Responsive Web Design

Responsive Website Design

Responsive web design lets us create web pages that looks good on all devices. By using HTML and CSS to automatically resize, hide, shrink, enlarge a web page to better fit on different devices such as desktop, laptop, tablet and mobiles.

What is Viewport

The viewport is the viewing / visible area on a web page. It  varies with the devices. It is smaller  on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

 We use meta tag to create viewport for different devices.

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

 This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded.

CSS @media Rule

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

Change the background color of the element to "lightblue" when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

You can also have different stylesheets for different media, like this:

Hide an element when the browser's width is 600px wide or less:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }

Use media queries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue:

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
Create a responsive navigation menu (displayed horizontally on large screens and vertically on small screens):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Use media queries to create a responsive column layout:

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Use a lightblue background color if the orientation is in landscape mode:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed:

@media screen {
  body {
    color: green;
  }
}

@media print {
  body {
    color: black;
  }
}

Comma separated list: add an additional media query to an already existing one, using a comma (this will behave like an OR operator):

/* When the width is between 600px and 900px OR above 1100px - change the appearance of

*/

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Example

Resize the browser window to see the effect!

By default, the background color of the document is "tan". If the screen size is 992px or less, the color will change to "blue". If it is 600px or less, it will change to "olive".