html - 媒体查询中的 css 未被应用

Question

编辑:解决了。我不小心在我打算删除的 css 中间留下了一个媒体查询。还修正了一些错误。谢谢你们。作品。

所以我有一堆可以正常工作的 html 和 css 代码。然后我在 css 中添加了 2 个媒体查询，在每个查询中我添加了一些代码来覆盖其他一些 css。但是这些媒体查询代码都不起作用。这是我的媒体查询内容:

@media screen and (max-width: 975px){
    body .top_outermost_container {
      width: 976px;
    }
}
@media screen and (max-height: 485px){
    .bottom_bar {
        top: 445px;
        bottom: auto;
    }
}
*/

我把整个代码放在这里:http://codepen.io/anon/pen/CJgqI谢谢你看!你摇滚。真正的。顺便说一句，您可能必须将代码复制并粘贴到文本编辑器中，才能使浏览器呈现出良好的质量。再次感谢

Answer 1

看起来你所说的问题是你永远不会关闭你的第一个@media 查询。 @media screen and (max-width: 975px) and (max-height: 438px){ 需要一个“}”。第二个查询不会触发，因为它不能是另一个查询的 child 。因此，在第 228 行左右，您需要在 @media 屏幕和 (max-width: 975px){ 查询之前关闭“}”。但是还有其他问题。

您的错误似乎来自您需要关闭标签“>”的 HTML

Line 15: <div class= "top_contained_container" </div>
Line 39: <div class="bottom_list_container1" </div>
Line 49: <div class="bottom_list2" </div>

使用验证工具，例如 http://html5.validator.nu/

你的 CSS 也有一些错误，比如额外的关闭标签“}”

Line 114: body {overflow: hidden;}}

您还可以通过验证工具更轻松地找到这些:http://jigsaw.w3.org/css-validator/validator