media query in CSS

Media Query allow you to apply CSS styles depending on the presence or value of device characteristics. It's common to apply a media query based on the viewport size so that layout choices can be made for devices with different screen sizes.

For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens.

         @media screen and (min-width: 400px) {
                          .container {
                              margin: 1pxm 2px;
                                   }
                        }


                     @media (min-width: 1200px) {
                         h1 {
                        font-size: 4px;
                             }
                       }

You can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. The points at which a media query is introduced, and the layout changed, are known as breakpoints.

for Extra small devices (phones, 600px and down)

               @Media only screen and max width: 600px)   {....}

for small devices (portrait tablet and large phones,600 px and up

                @Media only screen and min-width: 600px)    {....}

for medium devices (landscape tablets, 768px and up)

                @Media only screen and min-width: 768px)    {....}

for large devices (laptops/desktops, 992px and up)

               @media only screen and min-width: 992px)     {.....}

for Extra large devices (large laptops and desktops, 1200px and up)

                  @media only screen and min-width: 1200px)     {.....}

hope you enjoyed learning media query!

keep learning keep exploring!