怎样解决css3 media不起作用的题目

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

本教程操纵环境：Windows7系统、css3版，本文适用于所有品牌的电脑。

相关引荐：css视频教程

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不起作用的问题的具体内容，更多请关注百分百源码网其它相关文章！