Css 媒体查询百分比宽度

Question

我有以下标记（为演示而简化）

https://jsfiddle.net/n07znakb/3/

<div id="wrapper">
  <div class="playlist-inner">
    <div class="playlist-content">

      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>

    </div>
  </div>
</div>

playlist-content 是 1000px 的宽度（即 playlist-item number x playlist-item width），我是在 javascript 中设置的。

如果有 10 个播放列表项，则宽度为 2000 像素。

我想实现以下目标：

包装器最大宽度为 600 像素，可见 3 个播放列表项（此方法有效） 当包装器宽度在 600 到 400px 之间时，我希望播放列表项的宽度为播放列表内部的 33.3%（这是第二个上父级！），因此可以看到 3 个播放列表项。 当包装器宽度低于 400px 宽度时，我希望播放列表项的宽度为 playlist-inner 的 50%（这是第二个上父级！），所以 2 个播放列表项可见。

我知道我可以用 javascript 做到这一点。我想知道我是否可以单独使用css？

使用当前的 css 它不起作用，因为设置 33.3% 宽度需要父宽度，即播放列表内容，但我希望它是另一个上父级的 33.3% 宽度，即播放列表内部。

希望有人能理解。

Answer 1

您应该使用手机或更高版本进行编码。 并将包装器设置为相对。

所以从 0px 开始，你希望播放列表项为 100%；

.playlist-item{width:100%;}

400 及以上，你想要 50%；

@media screen and (min-width: 400px) {
   .playlist-item{width:50%;}
}

从 600 岁及以上，您想要 33.3%；

@media screen and (min-width: 600px) {
   .playlist-item{width:33.3%;}
}

我在这里制作了一个 ul 列表： https://jsfiddle.net/n07znakb/4/