Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

retina graphics/css media queries/pixel-ratio

Discussion in 'Website Coding & Programming Forum:' started by Levi, Feb 16, 2013.

  1. Levi

    Levi Moderator Staff Member

    Ok can someone explain/confirm this to me in simpleton terms....
    The way I see it....
    css media queries - used to define 'break' points based on resolution and to adjust the css to suit said resolution. Used in conjunction with max width, font percentages etc
    pixel-ratio - to stop retina displays using wrong resolution and used to define higher resolution images in css via the @2x image name or by using something like retina.js which swaps out the images automatically.
    Now the bit which is getting me is the on page images, think thumbnails/logo etc
    Would I need to do the 2x inline (assuming I don't cop out and use retina.js which would do it for me) or does the media query, pixel-ratio, do this automatically.
    Also the nexus 7 has to be different, this has a pixel ratio of 1.3.... can I just define a '1.3' like I would @2x.
    And is there a way to define a mobile phone versus a tablet at the same resolution, say by using pixel-ratio?

Share This Page