CSS Media Queries

Media query is a technique that is introduced in CSS3 . It is used to make responsive webpages which helps targetting different types of devices. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Syntax:

@media( media feature ) {
    // CSS Property
}

We can define as many media queries as we want but we usually define three types of media queries:

1. Mobile (Smartphone) max-width: 480px

   <style>
   
           @media (max-width: 480px) {
               body {
                   background-color: red;
               }
           }
        </style>
   

   This media query will work till the screen size max-width is 480px and it will stop working after it.

2. Tablets Ipads portrait mode max-width:1024px

   <style>
           @media (min-width: 481px) and (max-width: 1024px){
               body {
                   background-color: blue;
               }
           }
   

   This media query will work till the screen size max-width is 1024px and it will stop working after it.

3. Desktops max-width:1280px

   <style>
           @media (min-width: 768px) and (max-width: 1024px){
               body {
                   background-color: black;
               }
           }
   

   This media query will work till the screen size max-width is 1280px and it will stop working after it.