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?