为什么我的 Vue 组件会忽略媒体查询？

Question

我有这段代码片段在 Vue 组件的作用域样式中被忽略了。

        nav {
            background: none;
            box-shadow: none;

            .sidenav-trigger {
                background: none;
                border: none;
                cursor: pointer;

                i {
                    color: #f8f9fa;
                    font-size: 36px;
                }
            }
        }
    }

    @media (max-width: 768px) {
        nav {
            background: #f8f9fa;

            .sidenav-trigger {
                i {
                color: rgba(0, 0, 0, 1);
                }
            }
        }
    }

尝试使用最小宽度和其他 css 特性，但不幸的是，其中 none 有效。此外，我使用不同的浏览器进行进一步探索，但与问题无关。另外，我没有忘记将视口标签放入 index.html 文件中。如有任何帮助，我们将不胜感激。

Answer 1

看起来您上面还有一个选择器，例如：section nav 并且仅在媒体查询中 nav。比第一个表达式更高级。)

为什么我的 Vue 组件会忽略媒体查询？

Why does my Vue component ignore media queries?

html

css

responsive-design

vue.js