#032：让网格响应式

我们首先开始使用博客文章模块进行操作，调整间距。我们还在模块的左上角添加了一个小彩色方块，作为其内容类型的视觉标识。

接下来，我们进行的更改是减少较窄屏幕尺寸下的一些外部间隙。在宽屏上，内容宽度为 80%（边缘宽度为 10%），但在较小的屏幕上，将其改为 90%（边缘宽度为 5%）会感觉更好。

当媒体查询生效时，我们添加了一个小的过渡效果，这可能是一个非常有趣的“设计师技巧”。我喜欢在视频中使用它，但最终它被从设计中移除。当页面上有更多内容时，它可能会变得不流畅，并且相当分散注意力。

我们修改了网格系统，使其在最小尺寸处有一个断点。这非常简单，我们只需停止浮动列并将其设置为 width: 100%; 网格无需过度思考！在此过程中，我们遇到了某些特殊性问题。

我们打开真正的 iOS 模拟器，查看网格在“真实”移动设备上的工作情况。我们在寻找合适的元标记时遇到了一些困难，但最终从 CSS-Tricks.com 上获取了正确的标记。它起作用了！但当然，我们也有一些需要解决的定位问题。需要说明的是，该元标记是

<meta name="viewport" content="width=device-width">

我们不断调整间距和大小，直到看起来不错。最终，效果看起来相当不错！