CSS Media Queries

What is CSS Media Queries

• Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
• Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution.

• Media queries are used for the following:

  -To conditionally apply styles with the CSS @media and @import at-rules.

  -To target specific media for the "style", "link", "source", and other HTML elements with the media= attribute.

Types of CSS Media

• There are mainly 4 types : all, screen, print, tv

  all

         - all can target specified media queries on all devices
  

  screen

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

  print

         - Intended for paged, opaque material and for documents viewed on screen in 
           print preview mode. 
  

  tv

        - Intended for television-type devices.
  

Logical Operators

Max-Width

/* The below code will run when screen size will be between 0 px and 600 px */
        /* Max width means from 0 to 600 px */

        @media  (max-width:600px)
        {
            .container1{
                    background-color: red;
                    border: 2px solid black;
                    text-align: right;
                    color: palevioletred;
                    border-radius: 330px;
                    height: 100px;
                    margin: 20px;
                    padding: 10px;
                }
                .container-flex{
                    background-color: yellow;
                    border: 1px dotted dimgray;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 10px;
                }
        }

Min Width

/* The below code will run when screen size will be greater than 550 px */

        /* Min width means from 550 to end */
        @media (min-width:550px) and (max-width:600px)
        {
            .container1{
                    background-color: red;
                    border: 2px solid black;
                    text-align: right;
                    color: palevioletred;
                    border-radius: 330px;
                    height: 100px;
                    margin: 20px;
                    padding: 10px;
                }
                .container-flex{
                    background-color: yellow;
                    border: 1px dotted dimgray;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 10px;
                }
        }

Max-width AND Min-width

/* The below code will run when screen size will be between 550 px and 600 px */
        /* Max width means from 0 to 600 px */
        /* Min width means from 550 to end */
        /* So this below code will only work between 550 px and 600 px */
        @media (min-width:550px) and (max-width:600px)
        {
            .container1{
                    background-color: red;
                    border: 2px solid black;
                    text-align: right;
                    color: palevioletred;
                    border-radius: 330px;
                    height: 100px;
                    margin: 20px;
                    padding: 10px;
                }
                .container-flex{
                    background-color: yellow;
                    border: 1px dotted dimgray;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 10px;
                }
        }

Device breakpoints

• These are the screen sizes for various medias such as Tablet, Screen, Mobile, etc

• 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) {...}
  

Thanks for reading...See you soon