自适应按钮布局HTML5

Question

我正在尝试使按钮具有自适应性，以便当屏幕方向发生变化时（在移动设备上），按钮布局会发生变化。无论设备如何使用，其目的都是为了保持网站的用户友好性。我可以使用我在脚本中设置的css来完成按钮的大小调整。这并不难，但我不太确定两件事：

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

我目前的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。