javascript - 按钮填充可用空间，将它们分组到下拉菜单中

Question

假设我在应用程序中有一个 View 的顶部标题。此标题行应该是单行，并包含输入框和/或操作按钮等操作项。可以这么说，当我在标题中有 5 个操作项时，在全高清分辨率下，这些操作项不会占用可用的水平空间，这是可以的。然后，在较小的屏幕上，例如 iPad(横向，1024 像素宽度)，这些操作按钮累积后的宽度将大于可用宽度。通用的响应式解决方案是将一些元素包装到一个新行中，对吧？现在，就我而言，我无法换行为多行，但我需要实现的是将那些没有足够空间的操作项分组到下拉列表中。

我如何才能识别哪些元素没有足够的空间，以便我需要将哪些元素放入下拉列表中？ javascript是唯一的解决方案吗？有没有通用的方法来解决这个问题？

谢谢

Answer 1

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

例如，CSS 技巧网站在其导航栏上使用此内容:https://css-tricks.com/

您可以看到，在桌面大小的 View 上，页面左侧有一个链接列表。但是，如果您将页面大小调整得更小，则此链接列表会折叠成顶部导航栏中的“汉堡包”样式下拉菜单。

在此处了解媒体查询 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries .

媒体查询基本上允许您根据屏幕尺寸添加条件规则。