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

【问题标题】：Why aren't my CSS3 media queries working?为什么我的 CSS3 媒体查询不起作用？
【发布时间】：2019-08-07 16:20:27
【问题描述】：

需要你的帮助。无法解决这个问题，一直在寻找答案，但没有找到任何东西。

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

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

此外，我看不到“flex-direction: column”样式以某种方式应用于 Web Inspector 中的“.top-header”。

使用预处理器 LESS 和 koala 编译器，如您所知。不要从编译器得到任何错误，生成的 CSS 文件是好的：媒体查询代码就在那里，就在文件的末尾。

使用媒体视口：

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

这是一个 HTML sn-p，其中可以找到“.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”，那它是什么...

实在想不通，希望能得到一些直接的答案。

【问题讨论】：

stackoverflow.com/help/mcve
嗨尼克！ StackOverflow 编辑器有一个很棒的功能，叫做“sn-ps”。请编辑您的问题以使用 sn-p，其中包含一个简单的可重现示例，然后我们可以对其进行分析。或“德里克所说的”:-)
给我们一个在你的 html 中使用选择器的例子。在浏览器中打开检查器模式并确保没有其他样式覆盖 flex-direction 或 display: flex.
媒体查询很可能没有问题，但您的 HTML 没有针对您应用的样式设置，或者您有比媒体查询更具体的其他样式。一个简单的测试是在媒体查询中设置background-color，看看是否有效。
是的，除了末尾缺少的 } 看起来像有效的 CSS。

标签： javascript html css web media-queries

【解决方案1】：

尝试改用这个：

&lt;meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /&gt;

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

【讨论】：

试图在上面粘贴您的代码 - 没有用。老实说，我不知道为什么我没有把那个 } 放在那个代码示例中媒体查询的末尾，因为我的媒体查询 css 文件中有这个“}”，所以它不是答案（