How to use media queries for common device breakpoints with CSS?


Media Queries are used on a web page to set the responsiveness. It allows a user to set different styles based on different screen sizes. These screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints.

Different screen sizes

The common device breakpoints are the different devices with its screen size i.e.

  • Phones − Screens less than 768px wide

  • Tablets − Screens equal to or greater than 768px wide

  • Small laptops − Screens equal to or greater than 992px wide

  • Laptops and Desktops − Screens equal to or greater than 1200px wide

Screen Size with Maximum Width 600px

When the screen size is less than 600px, the following background color is set using the background-color property −

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

Screen Size with Minimum Width 600px

When the screen size is more than 600px but less than 768px, the following background color is set using the background-color property −

@media only screen and (min-width: 600px) {
   body {
      background: green;
   }
}

Screen Size with Minimum Width 768px

When the screen size is more than 768px but less than 992px, the following background color is set using the background-color property −

@media only screen and (min-width: 768px) {
   body {
      background: orange;
   }
}

Screen Size with Maximum Width 992px

When the screen size is more than 992px but less than 1200px, the following background color is set using the background-color property −

@media only screen and (min-width: 992px) {
   body {
      background: red;
   }
}

Screen Size with Maximum Width 1200px

When the screen size is more than 1200px, the following background color is set using the background-color property −

@media only screen and (min-width: 1200px) {
   body {
      background: cyan;
   }
}

Example

To use media queries for common device breakpoints using CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         color: white;
      }
      @media only screen and (max-width: 600px) {
         body {
            background: blue;
         }
      }
      @media only screen and (min-width: 600px) {
         body {
            background: green;
         }
      }
      @media only screen and (min-width: 768px) {
         body {
            background: orange;
         }
      }
      @media only screen and (min-width: 992px) {
         body {
            background: red;
         }
      }
      @media only screen and (min-width: 1200px) {
         body {
            background: cyan;
         }
      }
   </style>
</head>
<body>
   <h1>Typical Breakpoints Example</h1>
   <h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>

Updated on: 21-Dec-2023

70 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements