Margin-left 不会随媒体查询而改变 [重复]

Question

在媒体查询中，我要求将导航栏放置在底部并删除主要部分的边距。 媒体查询为导航栏而不是左边距。 https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000 怎么了。 ?

@media (max-width: 777px) {
  nav {
    display: block;
    position: static;
    text-align: center;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px;
  }
}

Answer 1

您只需将媒体查询放在 CSS 的末尾即可。 #main-doc 的默认样式位于媒体查询之后，因此覆盖它。 它应该是这样的：

#main-doc {
  margin-left: 290px;
}

@media (max-width: 777px) {
  nav {
    position: static;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px;
  }
}

Answer 2

当您在 @media 查询之后定义 #main-doc {margin-left: 290px;} 时，它会覆盖媒体。如果您打开浏览器开发者控制台，您可以看到@media 以较小的尺寸出现但不生效。因此，您可以将#main-doc {margin-left: 290px;} 移动到@media 之前，或者使用!important 关键字告诉浏览器“无论何时该媒体出现更重要”。最好不要过多使用!important，因为它可能会覆盖并损坏其他地方。

#main-doc {
  margin-left: 290px;
}
@media (max-width: 777px) {
      nav {
        display: block;
        position: static;
        text-align: center;
        width: 100%;
      }
      #main-doc {
        margin-left: 0px;
      }
    }

或

@media (max-width: 777px) {
  nav {
    display: block;
    position: static;
    text-align: center;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px !important;
  }
}
 #main-doc {
      margin-left: 290px;
 }