Reputation: 1918
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
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