如何更改媒体查询答案

【问题标题】：How to change media queries如何更改媒体查询
【发布时间】：2013-11-12 22:31:40
【问题描述】：

我找到了一些代码，但想更改 CSS 以一次只在页面上显示两个框。

可以向我解释一下如何在更改屏幕尺寸时更改媒体查询 css 以仅显示两个框。

我做了一个小提琴来展示我的工作。

#upload-container-two {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  margin-top: 20px;

}
#upload-container-two ul {
  width: 100%;
  *zoom: 1;
}
#upload-container-two ul li {
  float: left;
  margin-right: -100%;
  width: 93%;
}

#upload-container-two ul li a:hover {
  text-decoration: none;
}

#upload-container-two ul li span {
  font-size: 16px;
  line-height: 22px;
  display: block;
  position: absolute;
  bottom: 13px;
  display: none;
}
#upload-container-two ul li img {
  width: 100%;
}
#upload-container-two ul li:nth-child(2n+0) {
  margin-left: 0%;
  margin-bottom: 5.85%;
  clear: both;
  overflow: hidden;
  *zoom: 1;
}

@media screen and (min-width: 460px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 42.08%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(1n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
}
@media screen and (min-width: 750px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 27.73%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 34.29%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 68.59%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

@media screen and (min-width: 900px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 20.8%;
  }
  #upload-container-two ul li span {
    padding-bottom: 0px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 25.96%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+4) {
    margin-left: 77.89%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

【问题讨论】：

不明白，你不要margin？
我想了解如何显示 2 列而不是 4 列？

标签： html css responsive-design media-queries

【解决方案1】：

添加两个容器来播放宽度 float:none。不要忘记你的 clear:both 类。

My Codepen

<div id="main">

<div class="col">
  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
      <div class="clear"></div>
  </div> 

  <div class="col">
    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
    <div class="clear"></div>
</div> 

<div class="clear"></div>  
</div>

【讨论】：