Media queries

Media queries allow you to specify when certain styles take effect. For instance, you could define a block of styles that takes effect only when the screen is wider than 800px.

See also the specification.

Useful values include min-width, max-width, min-height, max-height, device-aspect-ratio, and many more. When browser support improves I'll add specific tests for more values.

Test

This is the test <p>. It should have a blue background when the total browser window width is more than 800px, and a red background when the browser window width is less than 400px.
It should also have a green border when the monitor you use has an aspect ratio of 16.9, but that feature doesn't seem to work yet.

Try resizing the window; the background of the <p> should change when the total screen width falls to below 800px.

@media screen and (min-width: 800px) {
	p#test {
		background-color: #6374AB;
		color: #ffffff;
		padding: 5px;
	}
	p#test code {
		background-color: transparent;
	}
}

@media all and (max-width: 400px) {
	p#test {
		background-color: #cc0000;
		color: #ffffff;
	}
}

@media screen and (device-aspect-ratio: 16/10) {
	p#test {
		border: 5px solid #00cc00;
	}
}