Pratik Ramteke's Blog

CSS Media Queries

Photo by Justin Morgan on Unsplash

CSS Media Queries

Pratik Ramteke's photo
Pratik Ramteke
·

2 min read

Table of contents

What are Media Queries?

Media queries are used to make the website responsive it allows you to apply CSS according to a device like as mobile, tab, laptop, or large screen devices Using CSS media queries in your website can give more flexibility to your website.

Media Types

1. Screen

The screen can target specified media queries on screen devices. devices like computers, tablets and mobile phones.

Syntax:

@media screen  {
    .container{
        /* styles */
    }
}

2. Print

Print can target specifies media queries for the printers.

Syntax:

@media print  {
    .container{
        /* styles */
    }
}

3. All

All can target specified media queries on all devices, it is the default type.

Syntax:

@media all  {
    .container{
        /* styles */
    }
}

Device Breakpoints

  • Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {...}
  • Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}
  • Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {...}
  • Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}
  • Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {...}

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Query</title>
    <style>
      body {
        background-color: lightblue;
      }
      @media only screen and (max-width: 600px) {
        body{
          background-color: lightcoral;
        }
      }
      @media only screen and (min-width: 600px) {
        body{
          background-color: lightcyan;
        }
      }
      @media only screen and (min-width: 768px) {
        body{
          background-color: lightgoldenrodyellow;
        }
      }
      @media screen and (min-width:992px) {
        body{
            background-color: lightgreen;
        }
      }
      @media screen and (min-width:1200px) {
        body{
            background-color: lightsalmon;
        }
      }
    </style>
  </head>
  <body>
  </body>
</html>
iwritecodeineuron