Responsive Web Design: CSS3 Media Queries for Mobile, Tablet & Desktop (Portrait & Landscape)

What is Responsive Web Design:

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. It aims to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with responsive web design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries. This means the design of the website will change dynamically based on the screen size and orientation of the device being used to view it.

CSS3 Media Queries:

CSS3 media queries are a feature of CSS (Cascading Style Sheets) that allow you to apply different styles depending on certain conditions, such as the width and height of the viewport, the device orientation (portrait or landscape), and the resolution of the device screen.

Media queries are a key component of responsive web design, as they allow you to create different layouts for different devices. For example, you might have one set of styles for screens that are wider than 600px, and a different set of styles for screens that are narrower than 600px.

Here's an example of a media query that applies a style only to screens that are 600px wide or narrower:

@media only screen and (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

In this example, the body element will have a light blue background on screens that are 600px wide or narrower. On screens wider than 600px, this style will not be applied.

Here are the list of CSS3 media queries  for Mobile, Tablet, Desktop & Large Desktop Portrait devices which supports both Portrait & Landscape.

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {

  body {

    background-color: pink;

  }

}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

  body {

    background-color: yellow;

  }

}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

  body {

    background-color: green;

  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

  body {

    background-color: blue;

  }

}