css3 media不起作用怎么办

这篇文章主要介绍了css3 media不起作用怎么办，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

css3 media不起作用的解决办法：1、修改media书写格式为“@media screen and (max-width:500px){ }”；2、检查样式冲突；3、检查css选择的优先级；4、修改meta属性viewport属性。

css3  @media不起作用原因汇总

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

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

外联样式引入css使用的src，粗心的错误

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

如果是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 media不起作用怎么办内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!