Javascript HTML5的自适应按钮布局

我试图使按钮具有自适应性，这样当屏幕方向改变时（在移动设备上），按钮布局也会改变。这样做的目的只是为了让网站用户友好，无论设备是如何使用的。我可以使用脚本中设置的css调整按钮大小。这并不难，但有两件事我不太确定：

如何在HTML中排列按钮，以便在方向或纵横比发生变化时使用Javascript等易于操作。我甚至不知道如何进行Javascript操作

每次长宽比或屏幕方向改变时（即当设备从垂直视图转到水平视图时），使用何种脚本触发按钮大小/布局代码

我当前的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>

按钮1
按钮2
按钮3
按钮4
按钮5
按钮6

这就是我希望它在纵向纵横比（即在智能手机上）中的外观：

这是我希望它在横向纵横比（即在PC上）中的外观：

---

如果有任何帮助，我将不胜感激，因为我对网络开发还比较陌生。

正如评论中所建议的，媒体查询肯定是解决这个问题的方法

---

您还可以考虑使用css flexbox，当您缩小屏幕或移动到移动设备上时，它有助于内容的流动。查看以下内容了解更多信息：。

您知道媒体查询吗？你试过什么？你的Css在哪里？@DaniP我不知道媒体查询。我刚刚在一个脚本中使用CSS来调整按钮的大小，仅用于纵向。我设置了边距、边距、宽度和高度。我最初的想法是创建另一个名为“button_container2”的容器，然后隐藏该容器，除非我希望使用中的方法获得水平视图。但我相信还有一种更有效的方法。你的答案是媒体查询，这样你就可以根据许多不同的点控制元素的CSS，比如设备宽度、设备方向或窗口大小。。。我建议从这里开始定义断点谢谢！我一定会调查的。这似乎存在一些浏览器兼容性问题。但这似乎比我的计划要好。除非你尝试支持ie8或以下版本，否则浏览器的comp几乎满了，这需要一些额外的工作，但有一个政策可以让媒体查询在那里工作。尝试媒体查询，如果您有任何问题，我们将提供帮助