Hi Philippe! Thanks for the help, I really appreciate it. On Sun, Jul 15, 2012 at 5:11 PM, Philippe Wittenbergh <e...@l-c-n.com> wrote: > And those will work on a Retina MBP, fwiw.
Awesome. Thanks for checking! :) > Correct, the 'min' stands for minimum, thus anything that is equal to > 1.5 or higher. Great! Thanks for the clarification. > Whether it is a good idea to blindly go for all devices > that return a value of 1.5 + is 'nother discussion, in the light of > persistent internet rumours about a device with a device-pixel-ratio > of 4 appearing in the next 20years or so... Sheesh, I don't doubt that devices will get more (pixel) dense in the future. As someone who has to build graphics for these devices, TBTH, I am not really looking forward to it. Don't get me wrong, I try to avoid bitmaps wherever possible in my designs these days, it's just that some things are unavoidable. :D > MDN is correct (luckily). Too many people just blindly copy-paste without > even bothering thinking. Heck, I'm glad I asked! Thanks for the tip off. FWIW, I've updated my examples: <http://jsbin.com/odipeq/2/> <https://gist.github.com/3118451> > BTW, the current 'official' way to write those resolution media-queries would > be > @media screen and (min-resolution: 2dppx) { /*stuff here */ } > But no browser support this, yet. Whoa, interesting! Thanks for info and linkage, reading now. > min-device-pixel-ratio is not officially documented anywhere (Apple > invented this for Retina devices), it might become official in a > future css4 media queries module though. I personally find it > immensely more readable than the 'dppx' one (I had to look up the > exact spelling of 'dppx' again while writing this). That's pretty wild! Thanks so much for all the details! I owe you one also! :D My biggest gripe is the need to account for all the different vendors. Also, the examples I have been showing you folks, they don't seem very DRY. For example: @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { ... } ... is it just me, or does "only screen" feel like overkill? It seems like every example I've found on the net uses the above syntax for targeting retina display: <https://github.com/h5bp/mobile-boilerplate/blob/master/css/style.css#L234-241> Why not just: @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-o-min-device-pixel-ratio: 3/2) and (min--moz-device-pixel-ratio: 1.5) and (min-device-pixel-ratio: 1.5) { ... } ... which would make doing something like this: @media only screen and (min-width: 990px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-o-min-device-pixel-ratio: 3/2) and (-moz-min-device-pixel-ratio: 1.5) and (min-device-pixel-ratio: 1.5) { ... } ... easier to write and understand. At least, for me, I find the syntax to be a bit confusing... Maybe if I did not have to account for all the different vendors, I'd be singing a different tune here. :D Sorry, I'm starting to ramble. Thanks again for the help Philippe, I really appreciate it! Cheers, Micky ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
