Quick Tip – CSS3 Media Queries

  • 2 Read Time(minutes)
  • 1/5 Difficulty
  • </> Application

CSS3 Media Queries are one of the greatest features of the CSS3 standard. It comes handy in responsive and mobile-friendly web design. With the use of media queries we can target specific resolution ranges to create different versions of our websites for different device screen sizes. In this Quick Tip, we’ll take a brief look at how we can interpret them in our stylesheets.

To better understand media queries, let’s dive right in, and get to know their selectors.

Min-Width

In this example, the background color will be red if the browser window’s width exceeds 500 pixels.

@media only screen and (min-width: 500px) {
	body {
		background-color: #C00;
	}
}

Max-Width

Here, the background color will change to blue if the browser’s size is under 800 pixels.

@media only screen and (max-width: 800px) {
	body {
		background-color: #00C;
	}
}

Max-Device-Width & Min-Device-Width

Using the Device-Width selectors, we can target not only resolutions, but specific mobile devices.

What’s the actual difference? The Device-Width selectors mean the full resolution of the device itself, while the Width selectors mean the viewing area. So if you want to target mobile devices, you may use the max-device-width and min-device-width selectors. Here is an example which changes the background to #A0A if viewed on a device with a resolution smaller than 720 pixels.

@media only screen and (max-width: 720px) {
	body {
		background-color: #A0A;
	}
}

Orientation

We can use the information whether the device is in portrait or landscape mode. Unfortunately this works ONLY with the Apple iPad. Here is an example of how you can target the iPad.

<link rel="Stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="Stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Combining Media Queries

We can target different resolution ranges by using multiple media queries together. For example if we wanted to define a style for a resolution between 320px and 480px, we would write this.

@media only screen and (max-width: 480px) and (min-width: 320px) {
	body {
		background-color: #0C0;
	}
}

And here is a superb example of what we can create with Media Queries. I’ve put together an empty HTML file and used a so-called MediaQuery-Reporter. Credits go to David Cochran for this!

You can view it by clicking this link.
Try resizing your browser window, and see wonder!

Conclusion

So in short, this is what we can create using CSS3 Media Queries. In my next tutorial, we’ll use Media Queries to create a Responsive website design. Stay Tuned!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

13 Responses

Comments

  • Bhumi said on 2015.06.17. at 9:43 Reply

    Nice post. Informative. Thanks for sharing.

  • Join the Conversation

    Captcha: × eight = 16