媒体查询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" />
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vue引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
Vue表单校验规则（rules）是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下2024-02-02
今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性 ；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥2021-09-09
sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端，本文给大家分享Vue使用sign-canvas实现在线手写签名，感兴趣的朋友一起看看吧2022-05-05
Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数
有些传递的参数是直接拼接到URL地址栏中的、但是为了统一管理、不能将传递的参数直接拼接到地址栏中，接下来通过本文给大家介绍Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数，感兴趣的朋友一起看看吧2022-10-10
这篇文章主要为大家介绍了Vite结合whistle实现一劳永逸开发环境代理方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue.draggable实现表格拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家介绍了vue3 axios 实现自动化api配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本文介绍了VUE中组件的基本使用以及个人对VUE组件的理解,希望能帮助到大家2019-02-02
最新评论