I'm doing some doodling around with responsive design(Finally, right?) and asked myself a question whilst using media queries: "What happens when i use this on a retina screen?".
So i started wondering if it's still proper to use pixels when targetting HD screens. I mean @media only screen and (min-width: 5 billion px) seems like a stupid thing to do.
So i wondered what the best practice is. Does the PX scale on HD screens? Or should i use DPI or device-pixel-ratio or perhaps something completely different?
My aim is to target pretty much all the screens for a mobile-only page. Pure for practice purposes and seeing for myself what is possible and logical.
My question pretty much is as follows: How can i target HD screens apart from the 'normal' screens in an all-round solution where i can make exceptions for both HD and normal def screens built for 'the future'.
Usually you use relative units like em or %.
For example, if everything in your page uses em, changing the font-size of the body will auto-scale every element proportionally to the font size.
In other words: you should code media-queries for resolution ranges and just adjust the top-most parent font-size (for example the document body) depending on the screen width, and the rest of the styles should be outside of these media queries, since a simple change in the font-size will auto-scale the entire page because the font-size has changed.
By the way, I doubt min-width will ever be "billions of pixels". For now, resoultions don't go beyond 4K in consumer and most professional screens (4096x3113). That is, I don't think you'll need to use a billion-pixels-media-query!