CSS媒体查询 - 宽度规则不适用

Question

如果屏幕尺寸减小到800 px以下，我正试图将标题的内容居中。

所以我定义了一个css媒体查询，但它无法正常工作。下面是我的代码的小提琴：

http://jsfiddle.net/QGyXe/3/

注意：我知道有很多代码，但我正在尝试调整div#head_frame及其子代div#logo_container和div#main_buttons_container

当我减小屏幕尺寸时，我会在Chrome的开发者窗口中看到新规则，但规则已经过了规则，我的意思是停用。我不知道为什么。这是一个screencap：

我尝试用简单的dom重现错误，但它确实有效：

http://jsfiddle.net/a3yKk/1/

但是我把它放在这里以显示我想要实现的目标。

感谢您的帮助。

Answer 1

媒体查询中的#main_buttons_container选择器不如全局CSS中的div#main_buttons_container选择器精确，因此会被覆盖。将您的CSS更改为：

@media screen and (max-width: 800px) {
  div#main_buttons_container {
    width: 100%;
  }
}