What is a common use of CSS media queries?

CSS media queries are a crucial tool in responsive web design, allowing developers to apply different styling rules based on the characteristics of the device or viewport. The primary purpose of media queries is to detect parameters such as the screen size, device resolution, and orientation, and to tailor styles accordingly.

For instance, when building a website that needs to look good on both mobile phones and desktop computers, media queries enable developers to define specific styles for different screen sizes. This adaptive design approach enhances user experience, ensuring that content is accessible and visually appealing across a range of devices.

By using media queries, developers can create breakpoints in their CSS that trigger certain styles when the viewport meets defined criteria. For example, you might increase the font size for larger screens or adjust layout properties to accommodate a touch interface on mobile devices. This targeted styling can dramatically improve readability and usability, making media queries indispensable in modern web development.

In contrast, the other options do not effectively relate the purpose of CSS media queries. Changing font size on hover pertains more to user interaction and pseudo-classes, while adding interactivity and combining CSS files focuses on different aspects of web development that do not specifically involve responsive design principles.