@media放在css样式前面不生效的问题

分类:计算机 | 前端 | CSS | 综合 149
更新:2021-03-01 00:36:10
编辑

在使用css3的@media查询对网页的某个元素进行移动端适配时发现设置的样式没有生效,看了一下@media的查询条件也没有错,那是怎么回事呢,后来仔细看了一下,发现@media写在了那个元素原有的css样式前面,想着会不会是因为这样的顺序导致了@media里面设置的样式被后面原有的css样式覆盖了,于是把它们的位置调换了一下,果然@media的样式就可以生效了。

比如原来的写法是:

/* 适应移动端网页尺寸-媒体查询 */
@media screen and (max-width: 600px) {
  .divarticlebody{
    width: 100%;
   }
}

.divarticlebody{
    width: 1240px;
}

要改成下面的写法:

.divarticlebody{
    width: 1240px;
}

/* 适应移动端网页尺寸-媒体查询 */
@media screen and (max-width: 600px) {
  .divarticlebody{
    width: 100%;
   }
}