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

rem单元在Chrome中完美运行,似乎它们在媒体查询中不受支持.这可能吗？或者这个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; }
}

活在http://jsfiddle.net/jsQ2N/2/show/,em-only版本在http://jsfiddle.net/jsQ2N/3/show/.

The spec says this关于rem和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’.

(font-size的初始值为medium,通常等于浏览器用户首选项中的默认字体大小设置.)

由于除了相对单位的上述引用之外,媒体查询3没有为任何特定单元定义特殊规则,因此rem应该像em一样工作,处理font-size的初始值.如果它在Chrome中不起作用,则很可能是一个错误.

我使用以下媒体查询在全屏模式下应用我的CSS覆盖：

@media (device-width: 100vw) and (device-height: 100vh) {
  .content {
    padding: 0px !important;
  }
}

在Firefox中完美运行但在Chrome中非常不可靠(在Windows 7 x64上都是最新版本).我可以尝试仅在不是全屏模式时应用我的覆盖,但需要反转查询.所以我的问题是：

> Chrome应该支持查询吗？
>我如何否定它(逻辑上没有)？

附：

我的视口声明如下：

<Meta name="viewport" content="width=device-width,initial-scale=1.0"/>

它可能不那么优雅,但更强大,可以听全屏事件,然后可能会在主体上添加一个is-fullscreen类,这样你就可以像这样编写你的规则了：

body.is-fullscreen .content { padding...

例如：

document.addEventListener('fullscreenchange',function() {
  document.body.classList.toggle('is-fullscreen',document.fullscreenEnabled);
});

此事件具有供应商前缀版本,因此请确保您使用的是所需的版本.

移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，可能会压倒所有人。在设计移动设备时，最重要的是哪些？我发现这篇文章做了一个很好的工作概述可用的媒体查询： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

我建议采取后 Twitter’s Bootstrap与这四个媒体查询：

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

编辑：这个问题的原始答案是从Bootstrap版本2。Bootstrap以来更改了他们的媒体查询在版本3.注意，没有明确查询小于768px的设备。这种做法有时被称为移动优先。任何媒体查询以外的任何内容都会应用于所有设备。媒体查询块中的所有内容都会扩展并覆盖全局可用的内容以及所有较小设备的样式。认为它是响应式设计的渐进增强。

/* Extra small devices (phones,less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets,768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) { ... }

在Bootstrap 3’s docs检查。