Медиа-запрос не работает в теге VueJS

Question

Я пытаюсь использовать @media в тегах стиля компонента VueJS. Стилизация в @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 или чем-либо еще. Это из-за отсутствия метатега в файле индекса. html.

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