按钮填满可用空间,将它们分组到下拉列表中

时间:2017-08-15 11:30:56

标签: javascript css user-interface responsive-design user-experience

假设我在应用程序中有一个视图的顶部标题。此标题行应为单行,并包含输入框和/或操作按钮等操作项。当我有,也就是说,标题中的5个动作项目然后在FHD分辨率上,这些没有占用可用的水平空间,这是可以的。然后在较小的屏幕上,如iPad(风景,1024px宽度),累积的这些动作按钮具有更大的宽度,然后可用。通用的响应式解决方案是将一些项目包装成一个新行,对吧?现在在我的情况下,我不能包装成多行,但我需要实现的是将那些没有足够空间的行动项目分组到下拉列表中。

我怎么能够确定哪些物品没有足够的空间以便我需要将哪些物品放入下拉列表? javascript是唯一的解决方案吗?有没有一种常见的解决方法?

由于

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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