Loading...

​​CSS Media Query

​​Media Query is a type of CSS that can adapt your site depending on various conditions. They are a fundamental technology of responsive web design.

​​

​​These conditions can be:

• ​​window width (common)

• ​​media types like screen and print (common)

• ​​device types

• ​​some features like hover

• ​​…

​​

​​To specify these conditions, use the @media​ CSS at-rule to apply part of a style sheet based on the conditions that you specified. With it, the CSS inside the media query block will be applied to the document if and only if the situation matches what you’ve set in the media query.

​​

​​Syntax

​​A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators (not, and, only, ,​(comma) ). Media queries are case-insensitive.

​​

​​Read more about how to create complex media queries using there logical operators:

​​https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#creating_complex_media_queries

​​

​​Examples

​​@media screen and (max-width: 800px) {

​​  p {

​​    padding: 1rem 3rem;

​​  }

​​}

​​This means that these styles will be applied to the document if and only if your browser's viewport width is equal to or narrower than 800px.

​​

​​@media screen and (min-width: 1280px) {

​​  p {

​​    line-height: 1.5;

​​  }

​​}

​​This means that these styles will be applied to the document if and only if your browser's viewport width is equal to or wider than 1280px.

​​

​​@media print {

​​  body { 

​​    font-size: 10pt;

​​  }

​​  nav {

​​    display: none;

​​  }

​​}

​​This means that these styles will be applied to the document when the website gets printed.

​​The print media query can be useful if you want the printed document to look clean and readable especially with texts.

​​

​​Some more examples:

• ​​https://jsfiddle.net/wruef46x/ - changing background color

• ​​https://jsfiddle.net/bf6Loasj/ - nav position change for mobile

​​

​​Most of the time, we put media queries at the bottom, because we would want it to override part of our CSS code. Also, when you have multiple breakpoints, the order matters. Like here:

​​body { background: red; }