是否可以在使用EM的媒体查询中覆盖浏览器的默认字体大小？ [英] Is is possible to overwrite the browser's default font-size in media queries using EMs?

问题描述

很多人认为 1em = 16px 。这是不正确， 1em = 大部分时间是您的浏览器字体大小的值16px 。虽然改变浏览器默认的字体大小并不常见，但它仍然是一个很容易改变的设置。

在这种情况下，覆盖 em 值，因为它使用顶部元素的字体大小，所以它们来自 HTML 元素透视图。例如：

  html {
 font-size：20px; 
 
 
 
 
 
 $ b 
这个简单的样式可以级联到文档的其余部分， 1em  20px 。
 
 
 
问题是，当使用CSS和媒体查询 code>， em 的值似乎卡在浏览器样式级别，而不是顶级元素。例如：
 
 
  @media screen and（min-width：2em）{
 ... some style .. 。
} 
  
如果我们考虑前面的 20px 覆盖HTML，可以预期在这种情况下， 2em 指的是顶级元素，并且将具有 40px 的值。但它不会，它会是 2 *浏览器的默认字体大小（例如16px，所以36px）。更糟的是，如果您将浏览器字体大小自定义为 24px ，则 2em 的值将有效地为 48px 。 
 $ b 
有没有办法解决这个问题？主要担心的是，如果我们不能覆盖浏览器的默认字体大小，很难预测媒体查询的风格。这个值变得不可预知，这意味着你的风格也将会是。
 
 
我可以想到一个复杂的方式使用JavaScript来获取浏览器的默认字体大小，但我不能不要理解为什么媒体查询不使用顶层元素的字体大小而不是浏览器的默认字体大小。我也希望有一个更好的方式来处理这个不需要复杂的JavaScript。
 
 
 
总结我正在寻找：
 
 
使用媒体查询时，覆盖默认浏览器字体大小值的方法。
 
获取默认值的简单方法浏览器字体大小。
 
 
解决方案
 
 
 
我能想到一个复杂的方式使用JavaScript来获取浏览器的默认字体大小，但我不能停止想知道为什么媒体查询不使用顶部元素的字体大小，而不是浏览器的默认字体大小。
 
顾名思义，媒体查询被设计为查询用户代理所表示的媒体的信息。因此，浏览器，而不是根元素。如果您希望查询基于根元素，您正在寻找元素查询，那么今天在任何形式的生产中都无法提供这些查询。
 
 
总结我正在寻找：
 
 
 
 
使用媒体时覆盖默认浏览器字体大小值的一种方法
 
 
 
这需要更改 font-size：medium 对应于（请参阅如果在ems中指定文档的字体大小，什么是em，这是不可能的）。
 
 
 
 
获取默认浏览器字体大小的简单方法。 $ b 
 font-size的关键字值计算到它们相应的绝对长度。理论上，您可以使用JavaScript来获取指定值为 font-size的所有元素的计算字体大小（与CSS的计算值的定义一致）：medium ，然后把这个值放在你的媒体查询中，但这需要使用JavaScript  window.matchMedia（）而不是CSS  @media 。这是什么，但很简单。
 
A lot of people think that 1em = 16px. This is not true, 1em = value of your browser font-size which is most of the time 16px. While it is not common to change browser default font-size, it is still an easy to change setting.

Given this situation, it is still easy to overwrite the em value from an HTML element perspective since it uses the top element's font-size. For example:
html {
     font-size: 20px; 
}
This simple style would cascade down to the rest of the document and 1em would effectively become 20px.

The problem is, when using CSS with media queries, the value of the em seems to be stuck at the browser style level and not the top level element. For example:
@media screen and (min-width: 2em) {
    ...some style...
}
If we consider the previous example with the 20px HTML overwrite, one could expect that 2em in that context refers to the top level element and would have a value of 40px. But it does not, it will be 2 * browser default font-size (e.g. 16px, so 36px). Even worse, if you customized your browser font-size to 24px, 2em will effectively have a value of 48px.

Is there ways around this? The main concern is that it's hard to predict style of media queries if we cannot overwrite the browser default font-size. This value becomes unpredictable, which means your style will also be.

I can think of a complex way using JavaScript to get the browser default font-size but I can't stop wondering why media queries don't use the top element's font-size instead of the browser's default font-size. I'm also hoping there is a better way to handle this which does not require complex JavaScript.

To summarize I'm looking for either:

A way to overwrite the default browser font-size value when using media queries.
A simple way to get the default browser font-size.

解决方案

  
I can think of a complex way using JavaScript to get the browser default font-size but I can't stop wondering why media queries don't use the top element's font-size instead of the browser's default font-size.
As the name implies, media queries are designed to query information about the media as represented by the user agent. Hence browser, not root element. If you want queries to be based off of the root element you're looking for element queries, something which today isn't available in production in any form.

  
To summarize I'm looking for either:

  
A way to overwrite the default browser font-size value when using media queries.
  

That would require changing what value font-size: medium corresponds to (see What is an "em" if the font-size of the document is specified in ems?), which is not possible.

  

  
A simple way to get the default browser font-size.
  

Keyword values for font-size compute to their corresponding absolute lengths. You could, in theory, use JavaScript to get the computed font size (which coincides with CSS's definition of "computed value" in this specific case) of any element with a specified value of font-size: medium, then put that value in your media queries, but this requires implementing all your media queries using JavaScript window.matchMedia() instead of CSS @media. Which is anything but simple.

                        
这篇关于是否可以在使用EM的媒体查询中覆盖浏览器的默认字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！