How to use Media Queries in Responsive Web Design?

Media queries allow a website of different views on various and different sizes of screens and browsers. Most commonly on Desktop, Tablet & Mobile.

How Min- and Max-Width Queries Work

Max-width

@media only screen and (max-width: 600px) {...}

What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”

Min-width

@media only screen and (min-width: 600px)  {...}

What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”

Combining media query expressions

Max-width and min-width can be used together to target a specific range of screen sizes.

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.