响应式 3 列

Question

我希望我的 3 个专栏能够在移动设备上响应，但我很难做到。我应该添加什么，或者如何让它发挥作用？ :) 我知道这可能是一个愚蠢的问题，但我是超级初学者，正在努力学习。谢谢

这是我使用的代码：

<ul style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 310px;">
    <li>
       <p>aaa</p>
    </li>
    <li>
       <p>bbb</p>
    </li>
    <li>
       <p>ccc</p>
    </li>
    <li>
       <p>ddd</p>
    </li>
    <li>
       <p>eee</p>
    </li>
    <li>
       <p>fff</p>
    </li>
    <li>
       <p>ggg</p>
    </li>
    <li>
       <p>hhh</p>
    </li>
    <li>
       <p>iii</p>
    </li>
</ul>

Answer 1

可以用grid，imao更清晰的解决方法：

<div style="display: grid; grid-template-rows: 3; grid-template-columns: 3">

  <p>Skvělé produkty</p>
  <p>Rychlé doručení</p>
  <p>Ochotu</p>
  
  <p style="grid-row: 2">Přívětivé ceny</p>
  <p style="grid-row: 2">Výhodné dopravné</p>
  <p style="grid-row: 2">Spolehlivost</p>

  <p style="grid-row: 3">Bleskovou expedici</p>
  <p style="grid-row: 3">Férový obchod</p>
  <p style="grid-row: 3">Bezodkladnou reklamaci</p>

</div>

编辑：聊天示例：

<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">

  <li>Skvělé produkty</li>
  <li>Rychlé doručení</li>
  <li>Ochotu</li>
  
  <li style="grid-row: 2">Skvělé produkty 2</li>
  <li style="grid-row: 2">Rychlé doručení 2</li>
  <li style="grid-row: 2">Ochotu 2</li>

</div>

<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">

  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Skvělé produkty</p>
  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Rychlé doručení</p>
  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Ochotu</p>
  
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Přívětivé ceny</p>
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Výhodné dopravné</p>
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Spolehlivost</p>

</div>

Answer 2

有一些方法可以进行响应式网页设计。但是我觉得用css @media 好用

@media only screen and (max-width: 768px) {
  .left,
  .right {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Media responsive</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .left,
    .right {
      height: 400px;
    }
    
    .left {
      background: blue;
      float: left;
      width: 60%;
    }
    
    .right {
      background: red;
      float: right;
      width: 40%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">
      LEFT
    </div>
    <div class="right">
      RIGHT
    </div>
  </div>
</body>

</html>

正如你在上面看到的，我创建了 2 个元素浮动 2 边。但是当使用小屏幕（<768px）时，你会看到它变成 1 行

您可以在此处阅读更多内容：W3 Responsive Web
记住一些事情：

考虑使用 rem、vh、vw、em 而不是 px，因为它喜欢 % 并且适合响应式
始终添加元视口

Answer 3

来自您评论的提示

@G-Cyrillus I dont have a preference, but probably one if I had to choose :) Either way is fine

您可以使用 column-width 代替 column-count 并最终 clamp() 调整大小：

li {border:1px solid;margin-bottom:2px}

<ul style=" column-width: clamp(310px, 30vw, 800px); ">
  <li>
    <p>aaa</p>
  </li>
  <li>
    <p>bbb</p>
  </li>
  <li>
    <p>ccc</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>eee</p>
  </li>
  <li>
    <p>fff</p>
  </li>
  <li>
    <p>ggg</p>
  </li>
  <li>
    <p>hhh</p>
  </li>
  <li>
    <p>iii</p>
  </li>
</ul>

关于 clamp() ，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

关于 column-width 见：https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

响应式 3 列

Responsive 3 column

html

css

multiple-columns

responsive-design

responsive