媒体查询在 VueJS 样式标签中不起作用

Question

我正在尝试在 VueJS 组件的样式标签中使用 @media。 @media 中的样式始终有效，而不是使用宽度规则。

<template>
    <header class="header"></header>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    .header {
        height: 2000px;
        background-color: black;
    }

    @media only screen and (min-width: 576px) {
        .header {
            height: 2000px;
            background-color: white;
        }
    }
</style>

但是它在原始 .html 文件中按预期工作。

Answer 1

问题解决了。它与 vue.js 或任何东西无关。这是因为 index.html 文件中缺少元标记。

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