Pixel Density. This post is part sharing my research over the past few weeks, and part continuing it by requesting your feedback in the comments below.
Years ago everyone got excited for Retina and it’s high density pixels. Now every smart phone has it’s own configuration all the up to a Sony with 806ppi (a PC monitor usually has 72px).
The question is – how do we accommodate this so a phone can look awesome and a PC can still load fast and efficiently.
Vectors
The real answer, it seems, is to use vectors wherever possible. SVG support is here in all recent versions of all major browsers. Perfect for icons and fancy elements.
HTTP2 Push means we don’t even need to sprite them, but you still can if you wish.
Fonts are vectors, CSS is all vectors. Looking good.
Bitmaps
For bitmaps – photos and graphics – we have srcset so we can tell the browser which sizes of the image are available, and let the device pick the best size (based on pixel density, network speed, user preference – amazing!). Srcset works everywhere except IE (but srcset falls back to the old src way anyway, so no difference).
The PX Value in CSS
The big question is what do we do with “px” values in CSS – which are increasingly meaningless. They could just become an arbitrary CSS value which devices calculate against their Pixel-Ratio and that may well work forever.
Another possibility is do we use Viewport values for everything – one viewport value is 1% of the width or height of the viewport. It’s an exciting new value!
And guess what? Viewport Units are already widely supported!
Conclusion
In short: The situation is pretty great 
🙂 The PX value is probably going to stick around for a bit (unless I’ve totally missed something) but devices know that and they’re happy to accommodate you for now.
Other Questions?
If you have other comments, or questions, leave them in the comments below.