When you are designing your responisve layout for mobile devices, CSS3 media queries are an essential component on your stylesheets. Let’s discuss how they work and what min-with and max-with work together.
Min-Width
@media only screen and (min-width: 330px) {...}
Here's what that actually means:
If [device width] is greater than or equal to: specified value, then do {...}
So if the actual "device width" is 310px this condition will return false.
If 310px is greater than or equal to 330px, then do {...}
The following CSS will apply if the viewing area is greater than 900px.
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Max Width
The following CSS will apply if the viewing area is smaller than 600px.
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
@media only screen and (max-width: 330px) {...}
Translates to:
If device width is less than or equal to: specified value, then do {...}
So based on this second example, if the "device width" is 320px the condition is true:
If 320px is less than or equal to 330px, then do {...}
It becomes false if you pass any value less than 320.
This means that max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule.
Multiple Media Queries
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Commonly used Media Queries in Email
From reading many industry blogs and even blog posts that I have written myself, we generally provide samples with just two conditions: screen and amax-width. For example:
@media only screen and (max-width: 640px) {...}
This statement would include a screen (monitor or device) AND any width less than 640px. Confusing right? Especially considering that in our recent responsive email templates, we use a combination of two breakpoints.
For example:
@media only screen and (max-width: 640px) {...}
@media only screen and (max-width: 479px) {...}
The second media query actually trumps the first due to standard CSS inheritance rules. By rights, the first triggers any device with a width less than 640px and the second triggers any device with a width less than 479px. So if you truly want to trump the first, you need to make sure that you overwrite all CSS properties under the second condition.
A more succinct approach would be to do the following:
@media only screen and (min-width:480px) and (max-width: 640px) {...}
@media only screen and (max-width: 479px) {...}
The only difference is that we added a min-width condition to the first media query. This now separates the two queries so that one doesn't necessarily have to trump the other. The first is now saying anything greater than 480px and less than 640px, the other is simply stating anything less than 479px.
The device width that is returned is based on the orientation of the device. It's not based on the highest 'possible dimension' that the device can support in any orientation. Again, the term 'max-width' is what led to my initial confusion here. Some devices return a different value depending on orientation and/or zoom level and others return the same value. Either way, there's only one 'width' value returned at any given time, it's not based on a range of values.
Device Width
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
For iPhone 4
The following stylesheet is specifically for iPhone 4.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
For iPad
You can also use media query to detect orientation (portrait or landscapse) on the iPad.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Media Queries for Internet Explorer
Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around.