css3 media不起作用怎么办?
@media不起作用原因汇总
首先确认是不是css本身的问题,而不是媒体查询没有生效;例如
div{display:flex;}/*那么div所有的display效果都将无法生效*/
外联样式引入css使用的src,粗心的错误
<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/ <link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/
如果是css问题,只能具体问题具体分析。
(相关课程推荐:css视频教程)
请按照下面的几种错误进行排查。
第一种错误:格式书写错误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" />
第五种错误:括号中的内容不能写结束符“;”,以及其它错误。
本文来自css3答疑栏目,欢迎学习!
以上就是css3 media不起作用怎么办?的详细内容,更多请关注易知道|edz.cc其它相关文章!