Media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.
They are a key component of responsive design. For example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up 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. Use @import
to conditionally apply an entire style sheet.