@media does not work in .vue file's style area

Version

2.6.10

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Steps to reproduce

Create a new component in .vue file

<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>

What is expected?

Media query detects different resolutions and apply styling

What is actually happening?

Media query does not work and the styling with line priority applies.

---

If I don’t use VueJS it works just fine. I tried with raw html css it is fine.

[MansurAliKoroglu]

Problem solved. There was a missing meta tag on index.html

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

[tsega]

If you can share your codebase maybe I can help, but better to take this on to Discord; https://discordapp.com/invite/HBherRA