UX设计实战｜什么是响应式栅格布局？

 

什么是响应式布局？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。

 

为什么使用响应式布局？

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

 

自适应和响应式区别？

自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。

响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。

比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，两者布局完全不同。

 

重点为大家介绍两种响应式布局方式，我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化：

 

1排列式栅格

这种栅格中，内容区块的尺寸和间距始终不变，每行能放几张卡片就放几张，摆不下就换行，逻辑非常简单。

 

2弹性式栅格

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

 

排列式布局和弹性式布局都属于分段式的布局变更，我们要关注到底发生了哪些变化。还有一种组件的调整式：样式调整，根据屏幕的大小，会做内容上的调整。

例如：耐克、华为等电商类官网，随着屏幕的放大缩小，会有一定样式变更：即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中

 

其实国内的大部分网页并没有做响应式布局，即便是部分做了的也大多没有使用上面讲的那两种自适应的栅格，通常它的尺寸伸缩并不是依赖一套通用的规范，而是人为设计了几种尺寸。

 

响应式这个词听着很复杂，但并不是任何项目都要硬往上套的。每种方案也各有优劣，没有完美的解决方案，最好的方式是根据不同的业务属性，选择一个最优解。

 

转载自小红书 作者为：阿尔勒的猫  若有侵权请告知删除