Media queries are a key component of responsive design that allow you to apply CSS styles depending on the presence or value of device characteristics.
It's common to apply a media query based on the viewport size so that layout choices can be made for devices with different screen sizes. For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens.
In CSS, use the @media
at-rule to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use @import
.
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.