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

Question

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

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

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

发生的情况是，当我减小屏幕尺寸时，我在 Chrome 的开发者窗口中看到了新规则，但规则被上划线了，我的意思是已停用。我不知道为什么。这是一个屏幕截图：在此处输入图像描述

我试图用一个简单的 dom 重现该错误，但它起作用了：

但我把它放在这里是为了展示我想要实现的目标。

谢谢你的帮助。

score 3 · Accepted Answer

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

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

1 回答 1