using cm in responsive media queries?

Question

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.

Answer 1

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.

---

Answer 2

There's really no benefit in using cm over px.

One of the official CSS3 Candidate Recommendations defines these absolute lengths:

unit    definition
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

Therefore 1cm is roughly equal to 37.80px. If a device's screen width measures 10cm, then in pixels this is roughly 378px.

Note here how I've said "device width". Media queries support 2 different width and height queries: min-width and min-height are based on the screen's resolution; min-device-width and min-device-height are based on the size of the screen.

You can refer to the official Media Queries documentation for further information.