CSS Media Queries

    In this Advance CSS tutorial, we will cover the CSS Media query and see how it is used.

    CSS 3 @media rule

    The @meda rule initially introduced in CSS2 , and extended for CSS3. It helps us to define different style rules for different media devices based on the media query. For instance, using the @media rule we can have different sets of styling for different devices. The media query can check

    • the width and height of the viewport
    • the width and height of the device
    • the orientation of the device (portrait and landscape)
    • the resolution of the device.

    based on these media queries we can set different styling for various devices.

    CSS @media Syntax 

    @media not|only mediatype and (mediafeature1 and|or|not mediafeature2) {
  CSS-Code;
}

    here and, only and not are the keywords. not invert the meaning of query. only keyword is for old browser versions that do not support @media query. and is used to combine mediatype and mediafetures if there is more than one. The mediatype defines the base reference for the media query, and there are four types of mediatype. mediafeature defines the condition to perform the media query.

    Mediatype

    There are four types of mediatype.

    Mediatype value Description
    all It specifies all the media type devices
    print It specifies the printer devices
    screen It specifies the screen of computers, tablets, and smartphones.
    speech It specifies the screen reader that reads the page.

    Example

    Let’s create a @media rule that changes the document background color to light-green if viewport width is smaller than 600px, else the background color is light blue. 

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body{
             background-color: lightblue;
            }

        @media screen and (max-width: 600px)
         {
             body{  background-color: lightgreen;  }
          }
  </style>
</head>
  <body>
      <p> minimize the screen width to 600px the background will change to light green</p>
  </body>
  </html>

    Behind the code

    The code of @media screen and (max-width: 600px) executes when the screen width of the display becomes less than 600px. Here the screen is the mediatype and max-width:600 is the mediafeature. We can also mention more than one mediafeatures in the expression joined by and keyword. for instance, we could also make a media query like @media screen and (max-width: 600px and max-height:700) , then the media styling will execute when the screen width is less than 600px and height is less than 700px.

    Summary

    • @media rule allow us to define different styling for different media devices.
    • The all mediatype applies styling to all the media devices.
    • The screen mediatype apply styling based on the screen condition.
    • the print mediatype defines styling for the printer.
    • the speech mediatype defines styling for the screen readers.
    Previous Tutorial Next Tutorial