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

[MansurAliKoroglu]

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.

[svkylmz]

The issue only exist on Google Chrome's Developer Tools' mobile view.

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow. When reporting a bug, a boiled down is required. You could also take a look at the generated CSS (generated by vue-loader) see if it is indeed wrong in some way and report the issue there

[MansurAliKoroglu]

Don't we consider this as a bug? Because I can't test my VueJS application by using Chrome Developer Tools mobile view if I run the application with npm run serve.

[tsega]

@MansurAliKoroglu here is a Codesandbox with a similar Vue component as your example code. I have tested it on Chrome v 79.0.3945.130, Firefox v72.0b7, Safari v12.1.2 and they all seem to work just fine.

[MansurAliKoroglu]

Yes somehow it works in codesandbox. I still can't manage to run it properly on my local. Maybe it is because of npm run serve? Maybe related with @vue/cli

[tsega]

@MansurAliKoroglu what it could be is a cache issue, try clearing your browser cache and see what happens.

[MansurAliKoroglu]

It's not a cache issue unfortunately. I cleared my browser cache. I also tried on different computers and even different browsers (opera browser also uses chromium. It has the same developer tools)

[tsega]

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

[MansurAliKoroglu]

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

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