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

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 和断点的实现变得非常容易而构建的框架。