Media query uses the @media rule to include a block of CSS properties only if a certain condition is true. With the help of media queries, we can add breakpoints to our webpage and make it responsive.

Media queries also help change the layout of a page depending on the orientation of the browser. A newer approach to web design is to go Mobile First, which means designing for mobile before designing for desktop or any other device (This makes the page load faster on smaller devices).

Other common uses of media queries include - hiding elements and changing the font sizes of elements on different screen sizes.

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple we can target five groups:

// 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) {...} \*