B端计师要知道的栅格设计（下）

大家好，我是子璐～

今天为大家分享的是栅格下篇「栅格在响应式设计中的运用」

响应式布局这个名词相信大部分设计师都不陌生，也能清楚知道它的基本呈现效果。但具体操作及与开发人员协作时，许多专业名词让人难以理解，你是否也产生过如下疑问?️：

宽度单位用百分比还是px，或者rem，他们之间的区别是什么？

响应式和自适应傻傻分不清楚，两者有何区别和联系？

什么是断点？什么是媒体查询？

一、响应式概述

1. 历史长廊

在早期，硬件设备落后，开发人员开发网页采用的主要是固定布局（也称为静态布局），固定布局是将其内容设置为固定的的像素宽度（px）

后随技术发展，浏览器增多，开发人员忙着兼容各种浏览器。出现了流式布局和弹性布局，内容使用百分比（%）确定宽度。

2010年，CSS3正式上线，同时推出了响应式布局，2012年推出了媒体查询（也叫断点，这个概念后面再具体展开解释）。媒体查询可以移动内容，改变文字大小，隐藏或显示内容块，调整边距和空白，以及调整其他的CSS样式。因为有了这两个东西，上线以后，自适应布局和响应式布局就作为更先进的布局用法而被迅速地使用。

2. 响应式和自适应的区别

自适应和响应式布局初学者经常会混淆，他们的原理确实是非常相似的，都是检测设备。先来看下他们的区别：

1）自适应（Adaptive）

基于用户体验，技术人员至少需要开发三套界面，将差别较大的屏幕尺寸（如PC端、手机端、平板端），去创建多个不同的设计稿，每一个设计稿去对应一个用户实际的尺寸范围，根据预先设置的判断标准范围进行适配。像大多数的平台网站、商城网站都使用自适应技术进行开发。

2）响应式（Responsive）

技术人员只需开发一套界面，而不是为每个终端做一个特定的版本，在代码中嵌入一些布局的判断，通过检测不同分辨率，代码自动进行处理，实现布局变化、尺寸缩放等，实现不同布局和内容适配。

三、如何利用栅格进行响应式设计

1. 响应式适配方式

定义响应式规则时，还需结合业务的属性去制定。那在布局时，内容区模块结构如何变化呢？简单介绍几种常见的变化形式：

1）拉伸布局

布局不变，内容在屏幕显示区域内进行相对拉伸，以达到布局完整。

如下图微信公众号后台的卡片适配采用的就是拉伸布局的形式，这种实现方式成本低，在响应式中大量的被运用。

2）等比缩放

布局不变，内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。‍

一般在带有图片显示场景中使用，如站酷的布局采用的就是这种形式，需要注意图片素材放大后清晰度的问题。

3）扩展布局

布局不变，内容可灵活按照屏幕比例进行增加或减少、扩展为多行或多列等。首先需要通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格

如下图花瓣的布局页面所示，在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。采用此方案需要做数据源的补足，保证内容展示合理。

4）固定布局

以像素px作为页面的基本单位，内容不会随着本身窗口宽度进行改变，窗口缩小后时内容会被遮挡

如 @且曼B端设计_刘美芳 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！