Question

我有一些固定宽度和高度的div，他们应该向左推到所有尺寸的屏幕

我想要实现的是，基于resoulotion，我想展示/隐藏其中一些。

例如：

1024px - 显示3个元素
1400px - 显示5个元素

这样做的最佳方式是什么？

这是我的CSS：

.square{
  width:200px;
  height:200px;
  background:salmon;
  margin:5px;
  float:right;
}

.container{
  position:relative;
}

.wrapper-div{
  position: absolute;
  width: 1000px;
  transform: translateX(-50%);
  left: 50%; 
}

Answer 1

是的，这可以通过@ media-queries轻松完成。

媒体查询的一个简单示例是：

在您的html页面的头部，您可以：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

包含内容的div：

<div class="square">

</div>

css将如下所示：

 @media (max-width:1024px) and (min-width:0px) {
    .square{
         your css width and etc..
    }
}

  @media (max-width:1400px) and (min-width:1025px) {
    .square{
         your css width and etc..
    }
}

有关它的更多信息HERE

Answer 2

您应该将media queries和:nth-child()合并来处理

CSS示例代码：

.square {
  /* Your square css */
}

@media (max-width: 1024px) {
  /* left displayed only the first 3th blocks */
  .square:nth-child(n+4) {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 1400px) {
  /* left displayed only the first 5th blocks */
  .square:nth-child(n+6) {
    display: none;
    visibility: hidden;
  }
}

按分辨率显示/隐藏不同数量的元素

2 个答案: