在Chrome中使用rem单位的媒体查询？ [英] Media queries with rem units in Chrome?

问题描述

是否可以在Chrome媒体查询中使用 rem 单位？

rem 单位在Chrome中正常工作，它似乎在媒体查询不支持。这可能吗？或者这个CSS有什么问题吗？

  body {background-color：yellow; } 
 
 @media only all和（max-width：40rem）{
 body {background-color：red; } 
} 
 
 @media只有全部和（min-width：40rem）和（max-width：60rem）{
 body {background-color：green;} 
} 
 
 @media only all和（min-width：60rem）{
 body {background-color：blue; } 
} 
  

住在 http://jsfiddle.net/jsQ2N/2/show/ ， em http://jsfiddle.net/jsQ2N/3/show/ 。

解决方案

规范说这个关于 rem 和 em 的相对单位：

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在HTML中，'em'单位是相对于'font-size'的初始值。

font-size 的值为 medium ，通常等于浏览器用户首选项中的默认字体大小设置。 ）

由于媒体查询3没有为相对单位的上述报价之外的任何特定单位定义特殊规则， rem 应该像 em ，使用 font-size 的初始值。如果在Chrome中无法使用，很可能是一个错误。

Is it possible to use rem units in Chrome media queries?

rem units work flawlessly in Chrome, it just seems that they are not supported in media queries. Is this possible? Or is there something else wrong with this CSS?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

Live at http://jsfiddle.net/jsQ2N/2/show/, em-only version at http://jsfiddle.net/jsQ2N/3/show/.

解决方案

The spec says this about relative units such as both rem and em:

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.

(The initial value of font-size is medium, which is usually equal to the default font size setting in the browser's user preferences.)

Since Media Queries 3 doesn't define special rules for any specific units besides the above quote on relative units, rem should act like em, working off the initial value of font-size. If it doesn't work in Chrome, it's most likely a bug.

这篇关于在Chrome中使用rem单位的媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！