Question

需要您的帮助。不能解决这个问题，已经寻找答案了很长时间，却没有找到任何答案。

这是关于一个完全正确的简单媒体查询。

@media (max-width: 942px) {
.top-header {
    flex-direction: column;
}
}

此外，我看不到Web Inspector中的“ .flex-direction：column”样式适用于“ .top-header”。

使用预处理器LESS和koala编译器，就知道了。不要从编译器中得到任何错误，生成的CSS文件是可以的：媒体查询代码就在其中，就在文件末尾。

使用了媒体视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

这是一个HTML代码段，可以在其中找到“ .top-header”：

<header>
    <div class="container">
        <div class="top-header">
            <div class="top-header__logo">
                <img src="img/Welcome-page/header/Logo.png" alt="Logo">
            </div>
    ...
</header>

在这里您可以看到名称类“ .top-header”，所以它是什么样子...

所以真的无法弄清楚，希望能得到一些直接的答案。

Answer 1

尝试改用此方法：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

此外，您的媒体查询缺少}

Answer 2

您缺少媒体查询的结尾}。

@media (max-width: 942px) {
  .top-header {
      flex-direction: column;
   }
}

查看最后一个结束}

为什么我的CSS3媒体查询不起作用？

2 个答案: