It is easy to get fooled by myths about media queries optimization. For example, it is a myth that splitting CSS into separate files included via @import
statements as follows, reduces bandwidth by loading only necessary CSS code:
@import url("479style.ss")screen and (max-device-width: 479px); @import url("767style.ss")screen and (min-device-width: 480px) and (max-device-width: 767px);
The truth is quite opposite. Such splitting of stylesheets into several files makes CSS easier to maintain but the browser downloads all the files. More HTTP requests certainly add overheads that slow down page loading.
Another myth I encountered is that all background images defined in a stylesheet are downloaded, even if they are inside media queries that do not apply to the current situation. That is not true. In the case of the following code, none of the major browsers download the test1.jpg
image:
@media screen and (max-width: 800px) { .photo_block4{background-image:url(test1...