Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
Media queries are used for the following:
- To conditionally apply styles with the CSS
- To target specific media for the
<source>, and other HTML elements with the
- To test and monitor media states using the
Note: The examples on this page use CSS's
@media for illustrative purposes, but the basic syntax remains the same for all types of media queries.