填充可用空间的按钮，将它们分组为一个下拉列表

Question

假设我在应用程序中有一个视图的顶部标题。这个标题行应该是单行的，并且包含诸如输入框和/或动作按钮的动作项目。当我有，也就是说，标题中的5个行动项目，然后在FHD分辨率，这些不占用可用的水平空间。然后在较小的屏幕上，比如iPad（横向，1024像素宽），这些动作按钮会积累起来，然后会有更多的宽度。通用的响应解决方案将包装一些项目到一个新的行，对吧？现在在我的情况下，我不能换行成多行，但我需要实现的是将没有足够空间的操作项组合到下拉列表中。

我怎么能确定哪些项目没有足够的空间，以便我需要将哪些项目放入下拉列表中？ JavaScript是唯一的解决方案？有没有一种常见的方法来解决这个问题？

谢谢

Answer 1

解决此问题的最常见方法是使用CSS媒体查询。

例如，CSS技巧网站使用这个自己的导航栏：https://css-tricks.com/

你可以看到，在桌面大小的观点有对页面左侧的链接列表。但是，如果您将页面大小调整为较小，则该链接列表会折叠到顶部导航栏中的下拉式“汉堡包”样式菜单中。

阅读媒体查询。

媒体查询基本上允许您添加基于屏幕大小的条件规则。