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

Question

媒体查询我的标题有不同的高度。当我在FF甚至IE上调整窗口大小时，它会立即应用新的高度值。问题是，Chrome只在浏览器刷新时执行此操作。它立即应用任何其他值（如背景颜色），但不应用高度。这也不会发生在页面缩放上，只会在窗口调整大小时发生。

@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; }
}

以下是Codepen：http://codepen.io/anon/pen/dPmrNW

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

Answer 1

正如您所说，如果您在调整窗口大小时仅在Chrome上遇到此问题，则Chrome很可能是您的代码问题。

Answer 2

您的代码在codepen中使用最新版本的chrome。 检查您的Chrome版本，您的代码可以使用。