I've recently read these 2 articles:
Responsive Web Design by Ethan Marcotte, and also this one by Jason Grigsby's about
CSS Media Query for Mobile is Fool’s Gold, and now I got confused. How should I make my site responsive without using % in images
And then I thought, why don't I just making a discrete intervals for that? Say that I have basic webpage with one image in it (as background), and the query for that image would be as follows:
PHP Code:
@media all and (max-width:320px){
.page{background-image:url('back-300px-wide.jpg');}
}
@media all and (min-width:320px) and (max-width:420px){
.page{background-image:url('back-370px-wide.jpg');}
}
@media all and (min-width:420px) and (max-width:520px){
.page{background-image:url('back-470px-wide.jpg');}
}
@media all and (min-width:520px){
.page{background-image:url('back-570px-wide.jpg');}
}
So there are 4 images to be prepared, back-300px-wide.jpg is the one with narrowest width, and back-570px-wide.jpg is the largest. And the question is... would a browser - say Safari on iPhone - still loading all 4 of them? Is that query code above a bad idea?
Thanks for any inputs.
Kind regards,
Hendra