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 编号 x playlist-item 宽度)，我在 javascript 中设置了这个。

如果有 10 个播放列表项，则宽度将为 2000px，例如。

我想实现以下目标:

wrapper 最大宽度为 600px，可见 3 个播放列表项(有效)当 wrapper 宽度在 600 到 400px 之间时，我希望播放列表项是播放列表内部宽度的 33.3%(这是第二个上层父项!)，所以 3 个播放列表项可见。当包装宽度低于 400px 宽度时，我希望播放列表项的宽度为播放列表内部的 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/