Question

我是第一次尝试媒体查询，但我找不到错误的地方。我在下面有代码，我假设这是一个语法错误。当我尝试运行它时，没有任何反应！感谢任何帮助，谢谢！

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="styles/mobile.css" />

风格/ mobile.css

.color {
        height:100%;
    }

.anim {
        height:0%
    }

.scrollup {
        display:none;
    }

.scrolldown {
        display:none;
    }

 .menu-icon {
        display:none;
    }

Answer 1

通常，媒体查询绕过CSS文件中的CSS，而不是<link>标记中的内联...

@media only screen and (max-device-width: 1024px) {

    .color {
        height:100%;
    }

    .anim {
        height: 0%;
    }

    .scrollup {
        display: none;
    }

    .scrolldown {
        display: none;
    }

    .menu-icon {
        display: none;
    }

}

Answer 2

正如@unknowndomain所说，媒体查询进入CSS文件内部，你也应该在文档的头部内有Viewport元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

如果您没有放置该标签，则媒体查询无效。

Answer 3

实际上有两种形式的媒体查询。

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css"/>

和

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

另外，我注意到您在媒体查询中一起使用“仅”和“和”。以下是关于这两件事的一些信息：

“和” ＆关键字用于将多个媒体功能组合在一起，以及将媒体功能与媒体类型相结合。基本媒体查询，具有隐含的所有媒体类型的单个媒体功能，可能如下所示：

@media (min-width: 700px) and (orientation: landscape) { ... }

“的仅” 唯一的关键字可以阻止不支持具有媒体功能的媒体查询的旧浏览器应用给定的样式：

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

媒体查询不区分大小写。涉及未知媒体类型的媒体查询始终为假。

媒体查询不起作用，可能是语法问题

3 个答案: