I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect.
<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>
This behavior is quite puzzling considering that it functions as expected when used in a standalone .html file.