为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

饮歌长啸 2024-01-03 14:01:45
我想制作一个按钮网格,根据宽高比更改布局,这样如果在高但不是很宽的布局上查看,它会是 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 和断点的实现变得非常容易而构建的框架。


查看完整回答
反对 回复 2024-01-03
  • 1 回答
  • 0 关注
  • 94 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信