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?
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?