【问题标题】:Margin-left doesn’t change with media query [duplicate]Margin-left 不会随媒体查询而改变 [重复]
【发布时间】:2022-01-14 23:20:26
【问题描述】:

在媒体查询中,我要求将导航栏放置在底部并删除主要部分的边距。 媒体查询为导航栏而不是左边距。 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;
  }
}

【问题讨论】:

    标签: css media-queries


    【解决方案1】:

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

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

    【讨论】:

    • 感谢您的帮助。
    【解决方案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;
     }
    

    【讨论】:

    • 不要使用!important。没有理由。我们不知道 OP 的其他 CSS 是什么样的。可能是媒体查询在默认样式之前。
    • @disinfor 我只是编辑我的答案。最好不要过多使用!important
    • 感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 2020-02-17
    • 2022-08-16
    • 2016-11-16
    • 2021-05-19
    • 1970-01-01
    • 2013-09-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多