关于vue中媒体查询不起效的原因总结_vue.js_

vue媒体查询不起效的原因

vue中 用less或scss都可以使用媒体查询不生效无非以下几种错误

错误一

在html结构文件里必须引入代码

• width=device-width 是指可视化宽度
• initial-scale=1.0 是指缩放比例

错误二

格式书写错误and后面必须有空格例如下面代码

错误三

样式冲突；@media查询代码的样式被后面的css所覆盖

注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖

.bg-header { width:100%; height:23rem; background-size:100% 100%; position: relative; @media screen and (min-width: 370px) { height: 25rem; } @media screen and (min-width: 300px) and (max-width: 370px) { height: 20rem; } } 

错误四

楼主所犯错误（不知道有没有童鞋跟我一样大意,吼吼吼）

如果只写下面图中1号的区间是不会生效的，必须还要写一个例如2号框里的最大宽度或最小宽度查询区间才行。

错误五

css本身出了问题导致css不生效（若前五项错误都确定不存在，多半问题就出在这）

div{display:flex;}/*那么div所有的display效果都将无法生效*/ 

例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。

例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一 一列举了。

vue使用media媒体查询

css必须是scss模式

npm install sass-loader node-sass --save-dev

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！