css3 media无效

CSS3 Media Query是一种能够根据设备屏幕尺寸和方向，对网页进行自适应的技术。然而，有时候我们会发现在使用CSS3 Media Query时却出现了无效的情况。

@media all and (min-width: 768px) {
  body {
        background-color: blue;
  }
}

上面的代码使用了CSS3 Media Query来设置当屏幕宽度大于等于768px时，网页的背景色为蓝色。但是当实际在不同设备测试时却发现无效。

造成无效的原因有很多，其中最常见的是由于CSS3 Media Query的写法不正确。例如，有些像素单位没有加上“px”（例如：320而不是320px），或者某些符号没有输入正确。

@media only screen and (min-width: 320px) and (max-width: 480px) {
  body {
        color: red;
  }
}
    

还有一种常见情况是关于CSS3 Media Query的执行顺序问题。当同时出现两个设置相同样式但是屏幕尺寸不同的媒体查询时，浏览器可能会执行靠后出现的那个设置，最终降级为普通的CSS样式。这意味着我们必须逐一检查写法、规则和顺序，才能发现可能引起无效的原因。

总的来说，CSS3 Media Query在对网页进行响应式布局时是非常非常重要的技术，但是遇到无效的情况也并不少见。我们需要对每个 Media Query 的写法进行仔细检查，保证样式的正确性和媒体查询的执行顺序，这样才能让响应式布局正常运行。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！