HTML and CSS Reference
In-Depth Information
@media only screen and (max-width: 300px){
/*CSS rules */ }
@media only screen and (max-width: 750px) {
/*CSS rules */ }
@media only screen and (max-width: 1150px) {
/*CSS rules */ }
This means IE6, IE7, and IE8 will render the styles as though these queries did not
exist! If you specify rules for device widths that are smaller at the end, it is likely that
those will be overriding the rules for device widths that are larger, leading to less than
optimal designs on Internet Explorer 8 and below.
Ideally, in this situation, you simply want IE to render all the styles and have the
user scroll, if necessary, so that the style rules for the largest widths always apply.
To do this, we can create a separate ie.css file that will render all the rules within
main.css except these rules will no longer be contained in media queries.
Doing this manually is hard work, and almost impossible to maintain. However, Nic-
olas Gallagher writes about an elegant solution he invented, which uses Sass to im-
port separate stylesheets for each media query breakpoint and compile them into
two separate stylesheets; one without media queries ( ie.css ) and the other with
media queries ( main.css ); we will look at this next.
The code snippet for ie.scss is as follows:
@import "300-up";
@import "750-up";
@import "1150-up" /* Make sure largest is last
The code snippet for main.scss is as follows:
Search WWH ::

Custom Search