IE8 doesn’t understand Media Queries. Fortunately, some clever individual wrote css3-mediaqueries.js Make sure you include that code on every page that will be using @media. Caution: Depending on the complexity of your CSS, this could make your browser crawl slowly - do some testing...
If you’d prefer to dynamically load the css3-mediaqueries library, you could use the Modernizr.load() function. You can read more about Modernizr and how it handles Media Queries.
Another polyfill, Respond.js, is available from Github or as an Initializr build option.
Perhaps it’s just me, but I always struggle when trying to make sense of the min- and max-width selectors. For example, when does this selector get applied? @media only screen and (min-width: 768px) The answer is, when the screen width is >= 768px.
When you see min-width, say to yourself, “Use this rule when the width is greater than or equal to...”
When you see max-width, say to yourself, “Use this rule when the width is less than or equal to...”
You can use a different CSS Style Sheet when a web page is printed. Common reasons for this would be the lay the page out differently, use a different font, and hide elements.
<style type="text/css">
@media only print {
html {
font-size:20px !important;
}
* {
background-color:transparent !important;
color:black !important;
}
}
</style>
This is one of the key methods for building a Responsive website.
/* These should be listed in order; either narrowest to widest, or the other way around. */
.demo { background-color:aquamarine; }
.demo:after {
content:'Your viewport is <= 450px.';
display:block;
font-weight:bold;
}
@media only screen and (min-width: 450px) {
.demo { background-color:yellow; }
.demo:after { content:'Your viewport is 450px to 799px.'; }
}
@media only screen and (min-width: 800px) {
.demo { background-color:palegreen; }
.demo:after { content:'Your viewport is 800px and wider.'; }
}
I have another example page that was designed for the larger iPad dimensions.