什么是响应式布局？

时间：2024-02-14 04:55:01 | 来源：网站运营

时间：2024-02-14 04:55:01 来源：网站运营

什么是响应式布局？：

“ 我们正在为鼠标和键盘、手持游戏控制器和触摸界面进行设计。简而言之，我们面临着比以往更多的设备、输入模式和浏览器。我们需要以更有效便捷的方式提供在不同尺寸的屏幕下相同的体验设计，因此我们需要响应式。”

我们正在面临空前爆炸的设备时代，折叠屏、可穿戴设备的出现使带屏设备尺寸愈加复杂，为这样复杂的场景做设计，绕不开一个关键词 “响应式”。

作为一个UX设计师，项目落地中经常会涉及到响应式布局的内容，在规范的创建中也经常会涉及到这个概念，这次参与公司项目的前端组件库的构建、系统级B端规范的创建中也频繁涉及。在我粗略的印象中，响应式是一种可变的，布局、组件弹性响应不同分辨率的设计，但是它背后的技术以及深层概念一直没有梳理清楚，借着今年项目创立新领域规范的机会，我决定深入沉淀一些东西，构建这个系列。

---

响应式布局（Responsive Layout）的定义

响应式布局的定义是2010年5月由Ethan Marcotte在他的文章《 Responsive Web Design 》

提出的一个概念。他认为，随着移动互联网的诞生，为每一个终端做一个特定的版本已经不合适了，而应该是一个网站兼容多个终端，网页智能响应不同尺寸的屏幕。

正如该领域最著名的一句话“Content is like water”，如果把各种尺寸的屏幕看作容器，那么内容就应该像水一样适应不同的容器形状。和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整界面。

本质上来说，响应式布局设计是适配不同屏幕尺寸的最佳展示方法，在设计上来说，页面的元素能够响应适配多种分辨率，通过前端技术在不同分辨率下，智能化的对页面内容进行布局，达到适合当前屏幕的最佳展示效果。

响应式布局设计不属于一项单独的技术，而是一个术语，用于描述网页设计的方法或一组最佳实践。在 Marcotte 最初的探索中，使用的是灵活的网格和媒体查询。在撰写该文章后的近 10 年中，响应式工作已成为默认设置。现代 CSS 布局方法本质上是响应式的。

以下以“星巴克官网”为例

当窗口从1920调整为1024时，页面左侧的登陆界面消失，菜单位置变更为头部菜单

当窗口从1024调整为768时，布局卡片跟随窗口进行尺寸缩放调整

当窗口从768调整为425（手机等小屏幕尺寸），页面在卡片布局、菜单位置、菜单样式上皆有调整。

所以以后说到响应式布局，再也不要单纯的理解为仅仅是组件宽度的自适应，它其实是一个多维度的共同适配，会涉及到页面布局的改变，菜单等功能的变化，内容的删减等。

响应式布局的三个CSS技术

想要更深入的了解响应式布局，不得不理解它所使用到的几个CSS概念，前端CSS中对响应式布局的实现主要通过：

• 百分比流式布局（Liquid Layout）
• 网格系统 (Grid System)
• @media 媒体查询

对屏幕尺寸进行响应布局。

流式布局（Liquid Layout）

流式布局（Liquid Layout）就是百分比布局，也称非固定像素布局。

将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。页面元素的宽度按照屏幕分辨率进行适配调整，但整体页面布局不变。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

使用%百分比定义宽度（搭配min-*、max-*属性使用），高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

例如设计中的栅栏系统，不同分辨率下的删格系统，整体布局不变，删格的Column、Gutter、Offset的尺寸会根据屏幕分辨率进行调整。

网格系统 (Grid System)

Grid布局是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。它使用一系列容器、行和列来布局和对齐内容，这就意味着它可以同时处理列和行，号称是当前最强大的的 CSS 布局方案。

我们可以这样理解，Grid布局是把页面分成一个一个的基础网格，通过不同数量基础网格的组合，自由组合成不同的单元格布局，同时对每个单元格可以进行独立控制。因此也被称为“二维布局”。

媒体查询@media

媒体查询@media由媒体类型和一个或多个检测媒体特性的条件表达式组成。可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。通过媒体查询，我们可以确定设备显示器的具体特征，并为其设定CSS样式。媒体查询可用于检查

• 视口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向还是纵向模式？）
• 解析度

通过媒体查询@media提供的一系列条件，我们可以对页面进行不同的布局组合，当媒体查询结果满足某些条件时，布局上进行相应的变化。例如，当分辨率小于多少时，卡片由1*4切换为2*2; 当窗口分辨率过小时，头部菜单隐藏收起等。

通过流式布局（Liquid Layout）、网格系统（Grid System）、媒体查询@media实现的响应式布局可以实现在不同分辨率下最佳的页面体验，保持统一的体验感受。

此处敲黑板！！！

响应式的响应的是浏览器窗口的宽度，而不是设备类型。

响应式的响应的是浏览器窗口的宽度，而不是设备类型。

响应式的响应的是浏览器窗口的宽度，而不是设备类型。

重要的事情说三遍，所以打开响应式的网站，改变浏览器的宽度，就可以看见页面随同窗口宽度进行变化。

从设计的角度看，响应式布局在页面上的展现可以简单归纳为：

• 页面布局从宽度的适配到整体布局的调整
• 页面组件内容的增减

由于当前32:9、21:9显示器以及曲面屏的不断发展，多屏、分屏观看窗口已成为用户使用的常态，当用户自定义窗口大小时，符合当前窗口尺寸的内容布局十分重要。页面横向内容展示不全，需要滚动条横向操作无疑是非常致命的体验缺陷（不排除某些专业情况的需要）。在互联网技术及用户体验飞速发展的今天，页面的响应式布局已是一种常规基础操作。