Describe the purpose and usage of media queries in CSS.

@gonzalo 

Media queries are an essential feature of CSS that allow web developers to create responsive web designs that can adapt to different screen sizes and devices. Essentially, media queries provide a way to specify different styles for different devices, screen sizes, and display capabilities.

The purpose of media queries in CSS is to enable web developers to create designs that can respond to different screen sizes and display capabilities. They allow the developer to target specific screen sizes and adjust the layout and style of the content to fit the device's screen size.

Media queries work by checking the viewport's width and height and applying styles based on the media query's conditions. This can include adjusting font sizes, hiding or showing content, and rearranging the layout of the page to fit the device's screen.

To use media queries in CSS, you need to define the conditions under which certain styles should be applied. This is done by specifying a media type, such as screen or print, and setting the conditions, such as minimum or maximum screen width, using the @media rule. For example, you could use a media query to apply a different style to a navigation menu when the screen width is less than 768 pixels.

Overall, media queries are an essential tool for creating responsive web designs that can adapt to different devices and display sizes. By using media queries, web developers can ensure that their website looks and functions optimally on a wide range of devices, from desktops to smartphones.