【问题标题】:css in a media query is not getting applied媒体查询中的 CSS 未得到应用
【发布时间】:2013-10-16 20:11:33
【问题描述】:

编辑:解决了。我不小心在我打算删除的 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 谢谢你看看!你摇滚。真正的。顺便说一句,您可能必须将代码复制并粘贴到文本编辑器中才能使浏览器呈现出良好的质量。再次感谢

【问题讨论】:

  • 你真的是说max-height吗?
  • 对这类事情使用 firebug 是一个好主意,因为它可以让您查看从何处应用了哪些样式。这可能与您对样式的定位与覆盖是否有效有关。
  • 您的标记中也有不少错误divs 未关闭,一些缺少> 等。
  • 你的@media 屏幕和 (max-width: 975px) 和 (max-height: 438px) 没有关闭...
  • 谢谢SHINOV T. 修复它

标签: html css media-queries


【解决方案1】:

看起来你正在谈论的问题是你永远不会关闭你的第一个@media 查询。 @media screen and (max-width: 975px) and (max-height: 438px){ 需要一个“}”。第二个查询不会触发,因为它不能是另一个查询的孩子。所以在第 228 行左右,您需要在 @media screen and (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

【讨论】:

    【解决方案2】:

    后面的 */ 看起来可能是个问题。

    您的语法看起来不错,应该可以使用。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-25
      • 1970-01-01
      • 1970-01-01
      • 2017-02-09
      • 1970-01-01
      相关资源
      最近更新 更多