What are Media Queries and How Do They Work

CSS3 introduced a new concept, media queries, which revolutionized the web. Media queries allow the presentation of the content to be manipulated to a range of devices without actually changing the content itself.

What this basically means is that media queries allow us to display our websites on different devices with ease. This was a major milestone for mobile design, which brought upon us responsive web design. Media queries strongly influenced the web design world by simplifying mobile device integration into our websites.

Setting up media queries

Media queries work by specifying certain conditions and applying a specific stylesheet to them. Let’s go over some different types of queries that will be most useful for you and explain what these queries mean.

Max Width

The following CSS will only apply if the viewing area size is smaller than 300px.

	@media screen and (max-width: 300px){
		p {color: #262626}
	}
	

Min Width

The following CSS rule will apply if the viewing area sizes is larger then 600px.

	@media screen and (min-width: 600px){
		p {color: #f2f2f2}
	}
	

Combining the two

It is extremely common and helpful to combine min- and max-width queries as it provides more accuracy. The following CSS code will apply if the viewing area is between 300px and 600px.

	@media screen and (min-width: 300px) and (max-width:600px) {
		p {color: #000 }
	}
	

You can actually combine a bunch of these queries together if you want to tailor to specific devices.

Device width

Device width varies from the regular min- and max-width queries because it actually refers to the resolution of a given device. Therefore the queries below will only apply the CSS if the display’s resolution is in fact 960px – iPhone 4’s display.

	@media screen and (max-device-width: 960px) {
		p {color: #444 }
	 }
	

Retina: Pixel ratio and resolution

The way retina display works is it packs in 2x the amount of pixels in the same amount of space than standard definition displays. If you want to target retina displays to change out background images for retina ready ones you should use the following query which makes sure that the CSS will only work when the pixel ratio is at least 2 and with a minimum resolution of 192dpi.

	@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
		p {color: #333}
	}
	

Landscape vs portrait

This query only works on some devices, such as iPads, because it is unfortunately not supported on all. But you can specify CSS rules for when a device is either in portrait or landscape orientation like in the examples below.

	@media screen and (orientation: portrait) {
		p {color: #333}
	}
		
	@media screen and (orientation: landscape) {
		p {color: #333}
	}
	

Another way to call media queries

As you saw in the examples above we always call media queries as part of a current stylesheet. That is totally fine but there are two ways of doing so, actually. The first is specifying a media query within your current CSS file as such:

	@media screen and (max-width: 300px){
		p {color: #262626}
	}
	

However, if you have a whole stylesheet of rules you want to be applicable to a certain device or query you can add a media query when you are linking the stylesheet within your HTML head as follows:

	<link rel="stylesheet" media="screen and max-width: 300px)" href="small-devices.css" />
	

The first way is helpful if you want to tweak just a few things to adjust for different devices or displays while the second one is much more helpful when you are recreating your website to different devices or displays where you have a bunch of things going on.

And so more

Now that you know a little bit more about media queries lets get a little bit technical. Media queries are made up of two things, first the media type and second is zero or more expressions – or queries if you prefer.

Conclusion

I lied to you a little just now, there are a few more expressions that are hacks and work-arounds such as the pixel-ratio one I showed you earlier. They don’t always work on every device but they are out there to help you out in specific quests you may want to solve.