Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts

    A Discrete CSS Media Queries ?

    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

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    I would not go that route, making four images for each picture. What about higher-density displays that are coming out? How many more different images will you make then? Besides, there really isn't much difference in bandwidth use between a 300px and 370px image. That's overkill.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •