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

Question

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

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

@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 片段，其中可以找到“.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”，那它是什么......

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

标签： javascripthtmlcsswebmedia-queries

Answer 1

尝试改用这个：

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

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