媒体查询在 VueJS 样式标签中不起作用 [英] Media query does not work in VueJS style tag
本文介绍了媒体查询在 VueJS 样式标签中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在 VueJS 组件的样式标签中使用 @media.@media 中的样式始终有效,而不是使用宽度规则.
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>
但是它在原始 .html 文件中按预期工作.
However it works as expected in a raw .html file.
推荐答案
问题已解决.它与 vue.js 或任何东西无关.这是因为 index.html 文件中缺少元标记.
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">
这篇关于媒体查询在 VueJS 样式标签中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文