带保证金的@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
  }
}

在桌面上，我有左右边距169px。 但在移动设备中我也有左右边距169px。 我想删除移动版本上的保证金。 但我的@media屏幕不起作用

Answer 1

1）使用max-width而不是min-width 。

@media Query 2） (min-width:768x) and (min-width-922px)具有相同的样式，因此可以合并它们。

注意：要查看结果，请使用full page并调整浏览器大小

  body { margin: 0; } footer{position:relative;display:block;padding:15px;text-align:center;background:#000;margin:0 169px;} /*Footer*/ @media only screen and (max-width:600px){#footer-wrapper .footer{float:left;width:100%;display:block; margin:0 auto} @media only screen and (min-width:768px) and (max-width:992px){#footer-wrapper .footer{width:100%; margin:0 auto} 

 <div id="footer-wrapper"> <footer class="footer"> This is Footer </footer> </div> 

Answer 2

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

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

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

Answer 3

试试这个

 /*For Desktops*/ @media only screen and (min-width:768px){ footer{ position:relative; display:block; padding:15px; text-align:center; background:#000; margin:0 169px; } } /*For Mobile Devices*/ @media only screen and (max-width:767px){ #footer-wrapper .footer{ width:100%; margin:0 auto } } 

要了解有关@media的更多信息，请访问： @media以获取网站中的响应式设计