媒体查询media不生效的原因及解决
更新时间：2024年10月17日 09:57:50 作者：Dragonfly Fly
媒体查询@media常见的不生效原因包括格式书写错误,例如and后必须有空格；样式冲突,后面的CSS会覆盖前面的；CSS本身存在问题,比如块元素浮动导致父级元素无高度而背景颜色不显示；漏掉了meta属性中的viewport属性,正确书写和排列CSS代码
媒体查询@media不生效的原因
1.格式书写错误
and后面必须有空格
@media screen and (max-width:500px){ }2.样式冲突
@media查询带的css写在后面
@media查询的css写在前面会被后面的css所覆盖。
p {
background-color:lightgreen;
}
@media screen and (max-width: 1280px) and (max-height: 800px){
p {
background-color:skyblue;
}
}3.css本身出了问题导致css不生效
注意：
- 这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；
- 此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。
4.漏掉了meta属性viewport属性
<meta name="viewport" content="width=device-width, initial-scale=1" />
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3 + Three.js实现自定义3D模型加载与交互实战全流程
Three.js是一个用于创建3D图形的JavaScript库,它基于WebGL技术,并提供了一系列的工具和API,这篇文章主要介绍了Vue3 + Three.js实现自定义3D模型加载与交互实战的相关资料,需要的朋友可以参考下2025-12-12
Vue项目localhost:8080无法访问此网站，拒绝了我们的连接请求的解决方案
前端页面使用的是vue,vue项目启动成功,没有任何报错,服务控制台已出现APP访问地址,点击访问地址出现无法访问此网站,拒绝了我们的连接请求,所以本文给大家介绍了Vue项目localhost:8080无法访问此网站,拒绝了我们的连接请求的解决方案,需要的朋友可以参考下2024-12-12
Vue 和React都是当前非常流行的前端框架,它们都可以用来构建单页面应用(SPA)和响应式的用户界面,这篇文章主要介绍了前端面试手撕代码之纯HTML、Vue和React组件的相关资料,需要的朋友可以参考下2026-02-02
这篇文章主要介绍了Vue Promise的axios请求封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue2.0项目集成Cesium的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue项目中做编辑功能传递数据时遇到问题的解决方法，vue父组件向子组件传递数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue+echarts动态更新数据及数据变化重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
本篇文章主要介绍了使用vue-cli编写vue插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
vue中脚手架的使用详解(@vue-cli、@vue/cli)
文章介绍了VueCLI的2.x和5.x版本,重点推荐使用5.x,详细描述了安装步骤和在Vue中使用axios的三种形式,最后总结了手动安装Vue-router的经验2026-05-05
这篇文章主要介绍了Vue常用的修饰符及应用场景解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论