Media Queries in Responsive Web Design
I suggest that you quickly pop over to the bathroom, then grab a coffee and come back. This is a long page of interesting informative reading, with a variety of examples of the individual CSS media queries that are currently available and used in responsive web design.
With the new CSS3 specification Media Queries have become extremely flexible and advanced within what they can now do. Previously the common use was to provide a specific style sheet for screen use, printing pages and for speech devices (aural styles), now, the list is huge.
We can now specify individual style sheets for pretty much any user device, be it a smartphone, tablet / touch pad, TV, normal PC, not only that, we can specify what types of screen, portrait or landscape.
This all sounds good, but the hard part is actually knowing where to use the media queries and how to use them in conjunction with the different calls. If you understand media queries, then your life gets simpler when designing a responsive web design.
Example uses of Media Queries:
<link rel="stylesheet" href="tablet.css" type="text/css" media="only screen and (max-width:600px)"> <link rel="stylesheet" href="phone.css" type="text/css" media="handheld and (max-width:320px)"> <style></style> tag or in an external CSS file
@import url("tablet.css") only screen and (min-width:600px); <style></style> tag or in an external CSS file
@media only screen and (min-width:600px) { body{color:#000;} } @media screen and (min-width:600px) { body{color:#000;} } @media screen and (min-width:600px) { body{color:#000;} } @media screen and (max-width:960px) { body{color:#FFF;} } @media screen and (min-width:600px) and (max-width:960px) { body{color:#000;} } @media screen and (min-device-width:600px) { body{color:#000;} } @media screen and (max-device-width:960px) { body{color:#000;} } Combining min & max to form multiple queries @media screen and (min-device-width:600px) and (max-device-width:960px) { body{color:#000;} } <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> Using @Media with multiple queries @media only screen and (min-width:600px) and (max-width:1024px) and (orientation:landscape) { body:color:#000; } Using @Import with multiple queries @import url(landscape.css) only screen and (min-width:600px) and (max-width:1024px) and (orientation:landscape); <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> Using @Media with multiple queries @media only screen and (min-width:180px) and (max-width:320px) and (orientation:portrait) { body:color:#000; } Using @Import with multiple queries @import url(portrait.css) only screen and (min-width:180px) and (max-width:320px) and (orientation:portrait); Notes
"min-width" = minimum width & "max-width" = maximum width
"max-width" is not the same as "max-device-width"; "max-width" indicates the actual viewport resolution whereas "max-device-width" is the devices actual size.
"only" is used to hide styles and or style sheets from older browsers that don't support the new media queries
Other media queries include:- color / min-color / color-index / min-color-index
- device-height / device-width
- aspect-ratio / device-aspect-ratio
- resolution / min-resolution / max-resolution
Understanding the Example Media Queries
Now that we have a ton of media queries, we need to understand what they are actually doing, or should I say, we need to know what we are doing with them. We know where we have to integrate the individual calls, be it in the head of the HTML file or directly in our stylesheets. But we don't know what they are doing.
So, we will now dissect some of the calls, although, when taking the calls apart we don't need to go through every call as they are combinations of simpler calls.
This call is our standard call found in the head of the HTML file.
Default call: <link rel="stylesheet" href="tablet.css" type="text/css" media="screen">
Default call with media queries: <link rel="stylesheet" href="tablet.css" type="text/css" media="only screen and (max-width:600px)">
What we need to understand here is: media="only screen and (max-width:600px)">
So here goes:
-
media = what type of media we are referencing, in this case its "Screen"
-
only = hides the media query from older browsers that don't support the new media queries
-
and = an additional criteria
-
max-width:600px = maximum width of the browser in use (not the device width)
So put in easy terms: the "tablet.css" file will be loaded by the browser when the browsers viewable size is lower than 600px
Here we use the "@media" specification to set our styling, either in the head of the HTML files or in an external CSS file.
@media screen and (min-width:600px) and (max-width:960px) { body{color:#000;} }
-
@media = what type of media we are referencing, in this case its "Screen"
-
and = an additional criteria
-
min-width:600px = minimum width of the browser in use (not the device width)
-
and = an additional criteria
-
max-width:960px = maximum width of the browser in use (not the device width)
Here we see that the "body{color:#000;}" is applied when the browser size is anything between the two sizes "600 - 960px", so for example, if the browser is 768px wide the styling is applied.
Here we use the "@import" specification to set our styling, either in the head of the HTML files or in an external CSS file.
@import url("tablet.css") only screen and (min-width:600px);
-
@import = import a style sheet
-
url = the path to the file we wish to import - in our case "tablet.css"
-
only = hides the media query from older browsers that don't support the new media queries
-
screen = the device we are importing the file for, this case its a medium to large screen
-
and = an additional criteria
-
min-width:600px = minimum width of the browser in use (not the device width)
Here we see that the "tablet.css" is imported by the browser when the browsers viewable size is larger than 600px
Here we use the "@import" specification to set our styling, either in the head of the HTML files or in an external CSS file.
@import url(landscape.css) only screen and (min-width:600px) and (max-width:1024px) and (orientation:landscape);
-
@import = import a style sheet
-
url = the path to the file we wish to import - in our case "landscape.css"
-
only = hides the media query from older browsers that don't support the new media queries
-
screen = the device we are importing the file for, this case its a medium to large screen
-
and = an additional criteria
-
min-width:600px = minimum width of the browser in use (not the device width)
-
and = an additional criteria
-
max-width:1024px = maximum width of the browser in use (not the device width)
-
and = an additional criteria
-
orientation = if the width is larger than the height the device is in landscape mode e.g. a touchpad on its side
Here we see that the "landscape.css" is imported when the browser size is anything between the two sizes "600 - 1024px" and the devices orientation is landscape.
The same rules apply to "portrait devices", with the difference: "if the height is larger than the width, the device is in portrait mode".
As previously stated we can see that a variety of the elements are repeated for the individual media queries. Using the logical "and" we simply combine a variety of elements to create an extensive variety of conditions.
Using the media queries is simply a question of trial and error - if you need a media query for a specific viewport size it's easily specified in the call, if you want a size that goes from "a" to "b" that's easy as well using "min" & "max-width".
Learning by doing is the key to success here.
Workarounds for Media Queries
Due to mobile device inconsistencies with "min / max-width" & "min / max-device-width" a new meta tag was developed and has now been integrated into the W3C's recommendations for Mobile Web Application Best Practices under section 3.5.10: Use Meta Viewport Element To Identify Desired Screen Size
The new meta tag tells the mobile device to interpret the viewport / browser width as the physical width of the mobile device in use.
So, what's the tag, and where does it go:
- HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - XHTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The meta tag needs to be placed in between the head tag "<head></head>"
Browser compatibility problems
As these media queries have only recently been introduced to the CSS3 specification, the majority of older browsers don't / won't support them. What to do, well, there are a number of workarounds, none are perfect, but better than no support at all.
For Internet Explorer the typical solution would to be to use conditional comments and create browser specific CSS files for handheld etc.
Another workaround is to use JavaScript, a well used (we use it as well) script can be found here: http://code.google.com/p/css3-mediaqueries-js/
Conclusion
Hopefully we have been able to clear some things up about media queries with this in-depth page of information. We are only human and therefore some of the content could possibly be interpreted differently.
Our experience to-date has been the inspiration for this page, and as of yet, all of the media queries we use and have developed work as stated here.
If you need more in-depth information about implementing CSS3 media queries we suggest visiting the "W3C's Media Queries Recommendations" page here »