关于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开发公众号网页
因为项目需要，近期做了一个公众号网页开发。在此期间也踩了一些坑，解决这些坑之后，准备对这个项目进行复盘。记录下项目从开发到上线所解决的问题，并对使用vue进行公众号开发的步骤进行一个总结。方便以后有问题进行查阅。希望对你有所帮助
2021-05-05
vue百度地图实现自定义弹框样式
这篇文章主要介绍了vue百度地图实现自定义弹框样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
利用vue实现密码输入框/验证码输入框
这篇文章主要为大家详细介绍了如何利用vue实现密码输入框或验证码输入框的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
2023-08-08
ElementUI 组件之Layout布局(el-row、el-col)
这篇文章主要介绍了ElementUI 组件之Layout布局(el-row、el-col),本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友一起看看吧
2024-07-07
解决el-select数据量过大的3种方案
最近做完一个小的后台管理系统,快上线了,发现一个问题,有2个select的选项框线上的数据量是1w+,而测试环境都是几百的,所以导致页面直接卡住了,本文给大家总结了3种方法,需要的朋友可以参考下
2023-09-09
前端element-ui两层dialog嵌套遮罩层消失的问题解决办法
最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,这篇文章主要给大家介绍了关于前端element-ui两层dialog嵌套遮罩层消失的问题解决办法,需要的朋友可以参考下
2024-08-08
vue3父组件异步props传值子组件接收不到值问题解决办法
这篇文章主要给大家介绍了关于vue3父组件异步props传值子组件接收不到值问题的解决办法,需要的朋友可以参考下
2024-01-01
vue 使用mescroll.js框架实现下拉加载和上拉刷新功能
这篇文章主要介绍了vue 使用mescroll.js框架实现下拉加载和上拉刷新功能,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
Vue使用ajax(axios)请求后台数据的方法教程
在vue中经常会用到数据请求,下面这篇文章主要给大家介绍了关于Vue使用ajax(axios)请求后台数据的方法教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
vue3中使用props和emits并指定其类型与默认值
props是Vue3中的一个重要概念,它允许我们将数据从父组件传递到子组件,下面这篇文章主要给大家介绍了关于vue3中使用props和emits并指定其类型与默认值的相关资料,需要的朋友可以参考下
2023-04-04