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

Question

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

我想要实现的是基于分辨率我想显示/隐藏其中的一些。

Fiddle

例如:

• 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