Mansur Ali Koroglu
Mansur Ali Koroglu

Reputation: 1918

Media query does not work in VueJS style tag

I am trying to use @media in style tags of a VueJS component. Styling in the @media works all the time instead of working with the width rule.

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

However it works as expected in a raw .html file.

Upvotes: 6

Views: 7401

Answers (1)

Mansur Ali Koroglu
Mansur Ali Koroglu

Reputation: 1918

Problem solved. It is not related with vue.js or anything. It is because of a missing meta tag in index.html file.

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

Upvotes: 7

Related Questions