WP-Mix

Just a couple of notes for working with CSS @media queries: two ways to write media queries and how to query portrait vs. landscape orientation.

Two ways to specify media queries

Here are two acceptable ways of writing media queries:

via HTML link tag

<link href="/path/to/style.css" media="all and (max-width: 480px), all and (max-device-width: 480px)" rel="stylesheet" type="text/css">

via CSS stylesheet

@media all and (max-width: 480px), all and (max-device-width: 480px) {
	.example { color: red; }
}

Each of these examples targets any screen with a maximum width of 480px, OR any device with a maximum width of 480px. That is, the comma is equivalent to “OR” when included in media queries.

Tip: to save a few bytes when targeting all types of media you can omit the “all and” and just write (max-width: 480px), (max-device-width: 480px). That is, when the media type keyword is omitted, the default value of all will be used.

Using orientation in media queries

Here is an example demonstrating use of orientation in @media queries.

Using this HTML:

<div class="example"></div>

And this CSS:

.example { 
	height: 100px; 
	background-color: red; 
	}
@media screen and (orientation:portrait) {
	.example {
		width: 500px;
		opacity: 1;
		}
}
@media screen and (orientation:landscape) {
	.example {
		width: 800px;
		opacity: 0;
		}
}

The results will be such that:

• In portrait orientation the <div> will be displayed at 500px width with a red background.
• In landscape orientation the <div> will be displayed at 800px width with a transparent background.

Tip: to get a smooth transition effect on supportive browsers, you can add transition: all 1s ease; to the .example selector outside of the @media queries. That will animate the changes in width and background-color when the screen is rotated from portrait to landscape (or vice versa). Note that you may want to use vendor prefixes for transition to provide wider browser support.