javascript - 自适应按钮布局 HTML5

Question

我正在尝试让按钮自适应，以便当屏幕方向发生变化(在移动设备上)时，按钮布局也会发生变化。目的只是为了让网站用户友好，而不管设备是如何使用的。我可以使用在脚本中设置的 css 调整按钮的大小。这并不难，但我不太确定两件事:

1. 如何在 HTML 中排列按钮，以便在方向或宽高比发生变化时可以使用 Javascript 等轻松操作它们。我什至不确定如何进行 Javascript 操作。
2. 每次长宽比或屏幕方向发生变化时(即当您的设备从垂直 View 变为水平 View 时)，使用哪种脚本来触发按钮大小调整/布局代码。

我目前的HTML布局代码如下:

<div class="button_container">

    <div id="toprow" class="buttons">
        <button id="btn1" class="topbuttons">Button1</button>
        <button id="btn2" class="topbuttons">Button2</button>
    </div>
    
    <div id="midrow" class="buttons">
        <button id="btn3">Button3</button>
    </div>
    
    <div id="bottomrow" class="buttons">
        <button id="btn4" class="bottombuttons">Button4</button>
        <button id="btn5" class="bottombuttons">Button5</button>
        <button id="btn6" class="bottombuttons">Button6</button>
    </div>
    
</div>

这就是我希望它在纵向纵横比下的样子(即在智能手机上):

这就是我希望它在横向纵横比(即在 PC 上)中的样子:

任何帮助将不胜感激，因为我是网络开发的新手。

Answer 1

正如评论中所建议的，媒体查询绝对是处理这个问题的方法。

您还可以考虑使用 css flexbox，它有助于在您缩小屏幕或移动到移动设备时让内容四处流动。查看以下内容以获取更多信息:Visual Guide to CSS3 Flexbox .