{"id":319964,"date":"2020-10-02T08:13:37","date_gmt":"2020-10-02T15:13:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=319964"},"modified":"2024-05-01T10:35:07","modified_gmt":"2024-05-01T17:35:07","slug":"a-complete-guide-to-css-media-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/","title":{"rendered":"A Complete Guide to CSS Media Queries"},"content":{"rendered":"\n

CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things. Perhaps the most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design.<\/p>\n\n\n\n

\/* When the browser is at least 600px and above *\/\n@media screen and (min-width: 600px) {\n  .element {\n    \/* Apply some styles *\/\n  }\n}<\/code><\/pre>\n\n\n\n
There are lots of other things we can target beside viewport width. That might be screen resolution, device orientation, operating system preference, or even more among a whole bevy of things we can query and use to style content.<\/p>\n\n\n\n
Looking for a quick list of media queries based on the viewports of standard devices, like phones, tablets and laptops? Check out our collection of snippets.<\/a><\/p>\n\n\n
Using media queries<\/h3>\n\n\n
Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.<\/p>\n\n\n\n
\n  \n          HTML      <\/summary>\n  \n\n
There are a few ways we can use media queries directly in HTML.<\/p>\n\n\n\n
There’s the <link><\/code> element that goes right in the document <head><\/code>. In this example. we’re telling the browser that we want to use different stylesheets at different viewport sizes:<\/p>\n\n\n\n
<html>\n  <head>\n    <!-- Served to all users -->\n    <link rel=\"stylesheet\" href=\"all.css\" media=\"all\" \/>\n    <!-- Served to screens that are at least 20em wide -->\n    <link rel=\"stylesheet\" href=\"small.css\" media=\"(min-width: 20em)\" \/>\n    <!-- Served to screens that are at least 64em wide -->\n    <link rel=\"stylesheet\" href=\"medium.css\" media=\"(min-width: 64em)\" \/>\n    <!-- Served to screens that are at least 90em wide -->\n    <link rel=\"stylesheet\" href=\"large.css\" media=\"(min-width: 90em)\" \/>\n    <!-- Served to screens that are at least 120em wide -->\n    <link rel=\"stylesheet\" href=\"extra-large.css\" media=\"(min-width: 120em)\" \/>\n    <!-- Served to print media, like printers -->\n    <link rel=\"stylesheet\" href=\"print.css\" media=\"print\" \/>\n  <\/head>\n  <!-- ... -->\n<\/html><\/code><\/pre>\n\n\n\n
Why would you want to do that? It can be a nice way to fine-tune the performance of your site by splitting styles up in a way that they’re downloaded and served by the devices that need them.<\/p>\n\n\n\n
But just to be clear, this doesn’t always<\/em> prevent the stylesheets that don\u2019t match those media queries from downloading, it just assigns them a low loading priority level.<\/p>\n\n\n\n
So, if a small screen device like a phone visits the site, it will only download the stylesheets in the media queries that match its viewport size. But if a larger desktop screen comes along, it will download the entire bunch because it matches all of those queries (well, minus the print query in this specific example).<\/p>\n\n\n\n
That’s just the <link><\/code> element. As our guide to responsive images<\/a> explains, we can use media queries on <source><\/code> element, which informs the <picture><\/code> element what version of an image the browser should use from a set of image options.<\/p>\n\n\n\n
<picture>\n  <!-- Use this image if the screen is at least 800px wide -->\n  <source srcset=\"cat-landscape.png\" media=\"(min-width: 800px)\">\n  <!-- Use this image if the screen is at least 600px wide -->\n  <source srcset=\"cat-cropped.png\" media=\"(min-width: 600px)\">\n\n  <!-- Use this image if nothing matches -->\n  <img src=\"cat.png\" alt=\"A calico cat with dark aviator sunglasses.\">\n<\/picture><\/code><\/pre>\n\n\n\n
Again, this can be a nice performance win because we can serve smaller images to smaller devices \u2014 which presumably (but not always) will be low powered devices that might be limited to a data plan.<\/p>\n\n\n\n
And let’s not forget that we can use media queries directly on the <style><\/code> element as well:<\/p>\n\n\n\n
<style>\n  p {\n    background-color: blue;\n    color: white;\n  }\n<\/style>\n\n<style media=\"all and (max-width: 500px)\">\n  p {\n    background-color: yellow;\n    color: blue;\n  }\n<\/style><\/code><\/pre>\n\n\n\n