6

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.

0

1 Answer 1

7

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.