Why @media (max-width: 50rem) work at 800px ( 50 * 16px ), because in theory it should work at 500px , since we redefined it for <html> ?

The code is below, and here is the link to the sandbox — you can immediately see it by moving the central dividing line ...

 html { /* override `rem` */ font-size: 10px; } div { background: red; height: 100px; width: 100px; } @media (max-width: 500px) { .px500 { background: green; } } @media (max-width: 50rem) { .rem50 { background: green; } } 
 <div class="px500">500px</div> <div class="rem50">50rem</div>

2 answers 2

Having a little understood the essence of the question, according to the specification :

Relative units in the media queries are based on the initial value of the declarations. For example, in HTML, the 'em' unit is relative to the initial value of 'font-size'.

But the initial value of the font is middle - this is exactly the same 16px. Therefore, setting media queries with the screen size in rem and em is not the best idea, to be honest. And apparently this is a "problem" for Chrome.

     @media only all and (min-width: 160px) and (min-width: 10em)

    It is better, perhaps, to write like that. Pixels - the absolute unit, equal to 1/96 inch (or rather rounded then a whole number of real pixels, a specific device with a high pixel density)

    em in this case is no different from rem, why is it still preferable to use em, I honestly do not remember, most likely, the support is better.

    So, in most browsers, 1em will default to 16px. The user, as you know, can change the settings of his font in the browser, and then the value of rem will change. But having a value in pixels, we are sure that the value will be no less than a certain minimum specified in pixels. Why, then, the value in em? Then, we also have to be sure that the value is not less than a certain amount of rem in order to apply the rule, because the block sizes can be set in rem firstly, but even if this is not the case, the string content can influence on sizes. As a result, the rule will apply only if the content passes by both pixels and rem. Let's fantasize and imagine that our “default value” will be not 16px, but 18px. What will change? And nothing, except that the transition will appear a little later. At the "default value" points, the minimum is the function that, when rem changes, gives a transition starting from a certain value. In one direction, the pixels will not decrease, and in the other, rem, which will be greater if the default pixel value is small. Since the design is usually designed to work FROM such a value, then with the “correct” default value, everything will increase at the right moment, but if we change something, it will increase “a little later”, you may not You will see some of the functionality designed for high resolutions, but at least you will not be able to get away with everything ...