B端计师要知道的栅格设计编辑导语：栅格是是B端产品和

编辑导语：栅格是是B端产品和设计师每天接触最多的组件，对于B端设计师来说它并不陌生，但是该如何更好的了解它的结构和作用，如何更好地运用它，许多人并不清楚。本文就一些大众的问题进行讲解并回答，让我们一起来看看吧！

文章图片
大家好，我是子璐～
今天为大家分享的是栅格下篇「栅格在响应式设计中的运用」
响应式布局这个名词相信大部分设计师都不陌生，也能清楚知道它的基本呈现效果。但具体操作及与开发人员协作时，许多专业名词让人难以理解，你是否也产生过如下疑问?????：
宽度单位用百分比还是px ，或者rem ，他们之间的区别是什么？
响应式和自适应傻傻分不清楚，两者有何区别和联系？
什么是断点？什么是媒体查询？

文章图片
一、响应式概述
1.历史长廊
文章图片

在早期，硬件设备落后，开发人员开发网页采用的主要是固定布局（也称为静态布局），固定布局是将其内容设置为固定的的像素宽度（px）
后随技术发展，浏览器增多，开发人员忙着兼容各种浏览器。出现了流式布局和弹性布局，内容使用百分比（%）确定宽度。
2010年， CSS3正式上线，同时推出了响应式布局， 2012年推出了媒体查询（也叫断点，这个概念后面再具体展开解释）。媒体查询可以移动内容，改变文字大小，隐藏或显示内容块，调整边距和空白，以及调整其他的CSS样式。因为有了这两个东西，上线以后，自适应布局和响应式布局就作为更先进的布局用法而被迅速地使用。

文章图片
2.响应式和自适应的区别
自适应和响应式布局初学者经常会混淆，他们的原理确实是非常相似的，都是检测设备。先来看下他们的区别：
1）自适应（Adaptive）
基于用户体验，技术人员至少需要开发三套界面，将差别较大的屏幕尺寸（如PC端、手机端、平板端），去创建多个不同的设计稿，每一个设计稿去对应一个用户实际的尺寸范围，根据预先设置的判断标准范围进行适配。像大多数的平台网站、商城网站都使用自适应技术进行开发。
2）响应式（Responsive）
技术人员只需开发一套界面，而不是为每个终端做一个特定的版本，在代码中嵌入一些布局的判断，通过检测不同分辨率，代码自动进行处理，实现布局变化、尺寸缩放等，实现不同布局和内容适配。

文章图片
此时设计师看到这是不是会有疑问????? ，怎么判断一个线上的网址是响应式还是自适应呢？
有个很简单的方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应
3.如何选择用自适应还是响应式
使用响应式：网站功能不多，用户交互少，升级低频或主要使用场景在桌面端，建议使用响应式。响应式成本较低，从运营的难易和维护的便利性考虑会更好，只要搞定网页端，其他的也都搞定了。例如官网、B端后台
使用自适应：需要兼顾用户在桌面端、Pad端、移动端等多个设备间的操作习惯，或从页面个性化多功能方面考虑，自适应设计更合适。因为这样可以更好的为用户提供功能全面，用户体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站，用户量较大的网站选择自适应更合适。