@Media 带边距的屏幕不起作用答案

【问题标题】：@Media screen with margin doesn't work@Media 带边距的屏幕不起作用
【发布时间】：2017-12-17 16:19:49
【问题描述】：

我有这样的代码：

    /*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 屏幕不起作用

【问题讨论】：

标签： html css

【解决方案1】：

试试这个

/*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 for responsive design in websites

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

1) 使用max-width 代替min-width。

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

注意：查看结果请使用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>

【讨论】：