using cm in responsive media queries?
css, media-queries
Solution
I'd been also keen on using physical units for CSS measurements, as it makes a lot of sense, specifically for designing reading experience of long form content on all types of devices. But the problem with this approach is that 1 CSS cm/in is absolutely not the same as 1 cm/in in the real world. Just try making a box with width and height of 1cm, and then measure the rendering in different browsers, screens and devices. You may be unhappily surprised.
The fundamental problem is that all (? well most) devices render physical units as (surprise) an equation of 1in = 96px (or 1cm = ~37.8px). So if you define your units or media queries in cm, that virtually means you define them in ~37.8 pixels ratio, which in most cases certainly is not what you want to.
Problem
I'm using centimeter in my CSS media queries to make my template responsive, while these days we have smartphones with very high resolutions that makes pixel filters difficult. my question is that why all websites don't use CM which makes responsive much more easy and functional? is there anything going to be missed by using cm that I don't know? Edit: I'm using `min-**device**-width` as a media query.