德州易搜网络是山东德州市一家专注企业营销型网站建设、企业电商培训的网络服务商!

咨询热线:138-8468-7093
响应式网站建设News
您当前位置:德州易搜网络 >> 新闻资讯 >> 响应式网站建设 >> 浏览文章

3种国内外常见的响应式栅格

发表日期:2019年09月26日文章编辑:易搜网络浏览次数: 标签:德州网络公司

我曾经很推崇 Material Design 的响应式栅格系统,花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。

可当真正需要用到响应式这东西时,在做完竞品调研后,我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统,因为:

那两张英文图表对艺术背景的设计师来说真的很难理解。

你设计的产品很有可能比 Material Design 的预期更加复杂。

你的开发团队很有可能不能够 or 不愿意花费时间尝试这么复杂的系统。

连 Google 自己的产品都没怎么使用这套栅格系统。

那么,真正大范围使用、可以借鉴的、非理想主义的响应式栅格存在吗?答案是肯定的,下面我要介绍三种国内外常见的类型。

一. 摆不下就换行

顾名思义,这种栅格中,卡片(即内容区块)尺寸和间距不变,每行能放几张卡片就放几张,摆不下就换行,逻辑非常简单。典型的例子有 Youtube 、Pinterest、Behance ……

△ Youtube

这么简单的响应式栅格系统,其问题也很明显:

页边距不确定,所以为了视觉的平衡感,大多将列表居中(像 Google Play 那样坚持左对齐也不是不可以)。

一整页好只有一种尺寸的卡片,否则边距无法不统一。

固定的卡片尺寸和边距可能在大屏里看起来太小,小屏里看起来又太大。

但是如果产品够简单,列表单一的话,用这种是没问题的。

二. 弹性伸缩填满

这种栅格系统的间距和页边距是固定的,卡片尺寸在一定程度下弹性伸缩,以确保填满整个屏幕。因为间距和页边距固定,也不用担心卡片混排。典型的例子有: Google Drive 、Spotify ……

△ Spotify

这种方式为了保证页边距不像第一种方式那样来回变动,不得不让卡片在一定范围内弹性伸缩,这样做的好处是,不同大小的卡片混排也不会造成混乱。但是在缩放浏览器时,你会发现卡片的尺寸无可避免地时大时小(如上图)。

我有话说:

 以下是对 [3种国内外常见的响应式栅格] 的评论,总共:0条评论
公司网站建设