Can I issue media queries in millimeters?

Question

I've got some text that I'd like to adjust for legibility on very small screens. However, I can't seem to get the media queries to work:

@media only screen and (max-width: 60mm) {
    body {
        font-size: 14px;                                                                              
    }
}

Answer 1

Yes, you can. The CSS3 Media Queries recommendation contains an example with min-width: 25cm, and there is no reason why you could not use mm as well, especially since the recommendation normatively cites CSS 2.1 for definitions of values. Any CSS 2.1 length unit is allowed in the value of max-width. This also works in those browsers that support CSS3 media queries in the first place (tested on IE, Chrome, Firefox).

So if it does not work, the problem is elsewhere. Since it may be difficult to make the viewport as narrow as 60mm, test first with 160mm. (It seems that IE 10 does not let you make the viewport 60mm wide, but this has nothing to do with the browser support to the mm unit in this context.) Also check that the property you are using within the @media rule is not overridden by other rules. Try testing first with some property that you do not set at all in your stylesheets.

Note that mm does not necessarily correspond to the physical unit (well, multiple of a unit) millimeter. As described in the CSS Values and Units Module Level 3 CR, the so-called absolute lengths like mm aren’t really absolute but may depend on device resolution and expected viewing distance. Moreover, small devices often scale the content by default.