我想制作一个按钮网格,根据宽高比更改布局,这样如果在高但不是很宽的布局上查看,它会是 2 宽和 8 下,在宽屏上它会是 8 宽和 2 下,中间是正常的 16:9,大约有 3 x 6。本质上,我不希望它拉伸,我希望它重新排列。我该如何在 HTML/CSS 中做到这一点?我愿意使用框架。它们不是我的主要语言(我正在为 python 脚本做一个网络界面),所以请在回复中详细说明。
1 回答
呼唤远方
TA贡献1856条经验 获得超11个赞
这都是由屏幕宽度决定的,而不是比例。有几种方法可以处理它。假设这个 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 和断点的实现变得非常容易而构建的框架。
- 1 回答
- 0 关注
- 94 浏览
添加回答
举报
0/150
提交
取消