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

https://www.tutorialspoint.com/how-to-use-media-queries-for-common-device-breakpoints-with-css

13-09-2020
|

Pregunta

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

CSS Web Development Front End Technology

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

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: white;
   }
   @media only screen and (max-width: 600px) {
      body {
         background: rgb(207, 60, 151);
      }
   }
   @media only screen and (min-width: 600px) {
      body {
         background: rgb(0, 128, 107);
      }
   }
   @media only screen and (min-width: 768px) {
      body {
         background: rgb(226, 136, 18);
      }
   }
   @media only screen and (min-width: 992px) {
      body {
         background: rgb(108, 25, 185);
      }
   }
   @media only screen and (min-width: 1200px) {
      body {
         background: rgb(13, 124, 63);
      }
   }
</style>
</head>
<body>
<h1>Typical Breakpoints Example</h1>
<h2>
Resize the screen to see background color change on different breakpoints
</h2>
</body>
</html>

Output

The above code will produce the following output on screen size greater than 1200px −

On screens between 0 to 600px the following output will be shown −

AmitDiwan

Published on 12-May-2020 15:43:52

Previous Page Print Page