关于vue中媒体查询不起效的原因总结
更新时间：2022年09月19日 08:34:43 作者：女程序媛的修炼笔记
这篇文章主要介绍了关于vue中媒体查询不起效的原因总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue媒体查询不起效的原因
vue中 用less或scss都可以使用媒体查询不生效无非以下几种错误
错误一
在html结构文件里必须引入代码
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
- 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媒体查询
<style lang="scss">
.s {
background-color: red;
width: 100%;
height: 500px;
@media only screen and (max-width: 1200px) {
background-color: green;
}
}
</style>
css必须是scss模式
npm install sass-loader node-sass --save-dev
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现移动端原生小球滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料，文中详细介绍两者的共同点和区别，通过图文介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
贪食蛇是一个非常经典的游戏, 在游戏中, 玩家操控一条细长的直线, 它会不停前进, 玩家只能操控蛇的头部朝向, 一路拾起触碰到之物。本文将用Vue实现这一游戏，感兴趣的可以尝试一下2022-04-04
这篇文章主要介绍了Vue.js实现一个todo-list的上移下移删除功能,需要的朋友可以参考下2017-06-06
vue3+ts+vite使用el-table表格渲染记录重复情况
这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Vue报错ERR_OSSL_EVP_UNSUPPORTED解决方法
Vue项目启动时报错ERR_OSSL_EVP_UNSUPPORTED,本文主要介绍了Vue报错ERR_OSSL_EVP_UNSUPPORTED解决方法,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue3中的Excel数据管理,即下载模板并导入数据功能的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-05-05
最新评论