html - @Media 带边距的屏幕不起作用

Question

我有这样的代码:

    /*footer*/
footer{
  position:relative;
  display:block;
  padding:15px;
  text-align:center;
  background:#000;
  margin:0 169px;
}

    /*Footer*/
@media only screen and (min-width:600px){
  #footer-wrapper .footer{
     float:left;
     width:100%;
     display:block; 
     margin:0 auto
  }
}

@media only screen and (min-width:768px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}

@media only screen and (min-width:992px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}

在桌面上，我的左右边距为 169 像素。但在手机上我也有 169px 的左右边距。我想删除移动版本的边距。但是我的@media 屏幕不工作

Answer 1

试试这个@media max-width:400px，我调用了一个logo类并没有显示它，那个位置，min-width:400px ，我调用另一个类并显示它..

@media screen and (max-width: 400px){
    .logo{
      display: none;
    }
}
@media screen and (min-width: 400px){
    .brand1{
    display: inline;
  }
}

1. 首先通过简单代码设计您的本地并练习此代码。
2. 使用 min 代替 max