Make a CSS media request to use the em size of an html document, not a browser?

Question

I am trying to use media queries to change the width of an element in pieces based on the width of the window (this allows me to increase the number of columns on the page without changing the width of the columns). I would like to do this using em instead of pixels so that everything looks right if you change the font size. However, if I use the following:

html { font-size: 12px; /* you could also use 75% if you want to be percent based.*/ } @media screen and (min-width: 42em) { div#page { width: 42em; } } 

The media request will be triggered when the minimum window width reaches 42 * 16 pixels, the default font size for my browser (Safari), and the page div # will be 42 * 12 pixels wide, inheriting the font size from the html element. I would really like for media queries to be called based on the width of the text I use, is there any way to make this work?

Answer 1

No, you cannot, because in the media query "Relative units in media queries are based on the initial value, which means that the units are never based on the results of declarations. For example, in HTML, relative to the initial value" font-size " . (Media Query Specification, 6 units proposal.) The initial font-size value is medium , which maps to the physical size depending on the browser (regardless of what you can set in CSS).

The conclusions depend on how you set the font size. If you specify the font size of the root element in pixels, it is logical to use pixels in media queries as well, since using em would not provide flexibility. If you set the font size of the root elements as a percentage, it makes sense to use em in media queries, but you just need to consider that em means the default font size of the browser, and you need to choose the em factor accordingly.

Answer 2

From the W3C (http://www.w3.org/TR/CSS21/syndata.html)
The unit "em" is equal to the computed value of the "font-size" property of the element on which it is used. The exception is when "em" occurs in the value of the "font-size" property itself , in which case it refers to the font size of the parent element .

 html { font-size:1em; width:42em; } body { font-size:1.6em; } @media screen and (max-width:40em) { div#page { font-size:0.875em; } /* 14px font */ } 

Note. 42em will probably never be 100% of the width of the browser window. If you change @media to act differently for different screen widths (max-width:1200px) , (max-width:1024px) , you will probably get more effect, I think you need to.

Answer 3

I was just looking for the same thing, and AFAIK cannot change the “native” browser / device font size; but it’s really good if you look at it in a certain way.

The media request and the html --if tag, set in relative units, refer to the same base number on any given device or browser (in the case of desktop browsers it is 16px, but may differ from other devices, or if the user changes his scale).

So, if you set your html text size as a percentage or em-measure of this value (for the desktop equivalent of 12px use 75% or 0.75em), and then set your media queries based on dividing the pixel width by this value (for the desktop equivalent of 960px use 60em), everything should fall on each device at each zoom level.

See also link