非理想主义的响应式栅格

正文

请到「今天看啥」查看全文

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

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

2. 一整页最好只有一种尺寸的卡片，否则边距无法不统一

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

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

二、弹性伸缩填满

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

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

这种响应式栅格稍微复杂一点，我下面画图示意设计方法：

1、画出基准界面：用一个理想宽度的屏幕，用适当的间距摆下理想尺寸的卡片

请到「今天看啥」查看全文