制作一个按钮网格，根据屏幕宽高比更改布局

Question

我想制作一个按钮网格，根据宽高比更改布局，这样如果在高但不是很宽的布局上查看，它会是 2 宽和 8 下，在宽屏上它会是 8 宽和 2 下，中间是正常的 16:9，大约有 3 x 6。本质上，我不希望它拉伸，我希望它重新排列。我该如何在 HTML/CSS 中做到这一点？我愿意使用框架。它们不是我的主要语言（我正在为 python 脚本做一个网络界面），所以请在回复中详细说明。

Answer 1

这都是由屏幕宽度决定的，而不是比例。有几种方法可以处理它。假设这个 HTML

<div class="container">
 <button class="button" id="button1">
 <button class="button" id="button2">... <button class="button" id="button18"></div>

处理它的最简单方法是为按钮提供固定宽度并让浏览器处理它。

.container{
 width: 100%;
}
.button{
 width: 100px;
}

如果您希望在不同的屏幕尺寸上有截然不同的行为，您将使用断点。始终首先设计移动设备。

.container{
 width: 100%;
}
@media only screen and (min-width: 768px){
  .container{
    width: 50%;
  }
}

如果你想要更细粒度的控制，你想要的是flexbox。您可以使用 Flexbox 选择是否希望按钮缩小以适合或简单地换行到下一行。

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

如果您对代码感到不舒服，Bootstrap是一个为使 Flexbox 和断点的实现变得非常容易而构建的框架。