The CSS media queries module enables testing and querying of viewport values and browser or device features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS
Media queries are a key component of responsive design. They enable conditional setting of CSS styles depending on the presence or value of device characteristics. It's common to use a media query based on viewport size to set appropriate layouts on devices with different screen sizes — for example three columns on a wide screen or a single column on a narrow screen.
Other common examples include increasing the font size and hiding navigation menus when printing a page, adjusting the padding between paragraphs when a page is viewed in portrait or landscape mode, or increasing the size of buttons to provide a larger hit area on touchscreens.
When designing reusable HTML components, you may also use container queries, which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.
Note: CSS media queries level 5 introduces five
@media descriptors that have not been implemented:
- Using media queries
Introduces media queries, their syntax, and the operators and media features used to construct media query expressions.
- Beginner's guide to media queries
Introduction to media queries and approaches for using them to create responsive designs.
- Testing media queries
- Using media queries for accessibility
Learn how media queries can help users understand your website better.
Tips and techniques for helping improve web content printer output.
- Learn: responsive images
Learn how to use media queries with
sizesto implement responsive image solutions on websites.
- CSS containment module
- CSS conditional rules module
- CSS paged media module
- CSS object model module
|Media Queries Level 3
|Media Queries Level 4
|Media Queries Level 5