What do media queries in CSS allow developers to do?

Media queries in CSS are a powerful feature that enables developers to apply different styles based on various conditions, particularly the size of the viewport. This functionality is essential for creating responsive web designs that adapt to different devices—such as smartphones, tablets, and desktops—ensuring an optimal viewing experience regardless of the screen size.

By using media queries, developers can specify style rules that activate only when certain conditions are met. For example, one might define styles for devices with a maximum width of 600 pixels to cater to mobile devices, while applying a different set of styles for larger screens. This adaptability is crucial in modern web development, as it allows the same HTML document to be presented in a way that is visually appealing and functional across all platforms.

The other options present capabilities that are unrelated to the specific function of media queries in CSS. For instance, automatic image resizing depends on CSS properties or JavaScript, creating animations typically involves using keyframes and JavaScript, and altering the document structure would require changes to the HTML itself rather than styling adjustments through CSS. Therefore, media queries provide the essential capability of tailoring styles to varying viewport sizes effectively.