Chrome 仅在刷新时应用媒体查询的高度 属性

Question

我有一个 header 高度因媒体查询而异。当我在 FF 甚至 IE 上调整 window 大小时，它会立即应用新的高度值。问题是 Chrome 只在浏览器刷新时执行。它立即应用任何其他值（如 background-color），但不应用高度。这也不会在页面缩放时发生，只会在 window 调整大小时发生。

@media all and (max-width: 30em) {
header { height: 40%; background-color: #333333; }
}

@media all and (min-width: 30em) and (max-width: 56em) {
header { height: 50%; background-color: #666666; }
}

@media all and (min-width: 56em) {
header { height: 60%; background-color: #cccccc; }
}

这是代码笔：http://codepen.io/anon/pen/dPmrNW

这是 Chrome 错误还是代码有问题？

Answer 1

如果如您所说，此问题仅在您调整 window 大小时在 chrome 上遇到，则很可能是 Chrome 而不是您的代码出现问题。

Answer 2

您的代码可以在最新版本的 chrome 的 codepen 中运行。 检查您的 Chrome 版本，您的代码有效。