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.
The question is – how do we accommodate this so a phone can look awesome and a PC can still load fast and efficiently.
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.
Fonts are vectors, CSS is all vectors. Looking good.
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!
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.
If you have other comments, or questions, leave them in the comments below.