×

css3 @media不起作用是什么原因?怎么解决?

作者:Web前端之家2020.06.01来源:Web前端之家浏览:1903评论:0
关键词:html5css3media
微信公众号

微信公众号

css3 @media不起作用是什么原因?怎么解决?

不要慌呢,慢慢分析。

首先确认是不是css本身的问题,而不是媒体查询没有生效。例如:

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

第一种错误:格式书写错误,and后面必须有空格

例如下面代码:

@media screen and (max-width:500px){ }

第二种错误:样式冲突;@media查询代码的样式被后面的css所覆盖

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

第三种错误:css本身出了问题导致css不生效

注意:这是一种很常见的错误,例如块元素浮动导致父级元素没有高度;此时给父元素加背景颜色发现没有生效,实际上是css导致的错误,而没有显示。

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

第四种错误:meta属性viewport属性,这个虽然基本常识,应该也会有人漏掉。

<meta name="viewport" content="width=device-width, initial-scale=1" />

第五种错误:括号中的内容内容不能写结束符“;”,以及其它错误。

解决办法:

有很多解决方法,但是建议可以是用css排除法,使用css注释掉一部分;

当然浏览器也是一个很好的查看代码解决问题的方法。

@media screen and (max-width:200px){
/*这只是一个示例*/
}

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/yidogn20200601.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria