一、介绍

1.1 发展历程

响应式布局起源于20世纪的建筑设计领域，最初用于描述建筑物根据环境变化自动调整的能力。随着互联网技术的发展，这一概念被引入到网页设计中，以解决传统固定布局在多样化设备上的局限性。自2010年以来，随着智能手机和平板电脑的普及，响应式布局逐渐成为网页设计的标准实践。

• 固定布局：内容在不同屏幕上的尺寸和布局保持不变。这种设计适用于桌面电脑，但在移动设备上显示效果不佳
• 流式布局：将元素的宽度设置为百分比而不是固定像素值。这样可以使网页内容在不同屏幕尺寸下自动调整大小，但仍存在布局失控和内容挤压的问题。
• 媒体查询：CSS3引入了媒体查询功能，允许开发人员根据设备的特性（如屏幕宽度、分辨率等）应用不同的CSS样式。这种技术使得网页可以根据设备的不同特性应用不同的布局和样式，为响应式设计奠定了基础
• 响应式设计：综合利用了流式布局和媒体查询技术，使网页能够根据设备的尺寸和特性动态调整布局和样式，以适应各种屏幕大小和设备类型。这种方法提供了更一致、更灵活的用户体验，成为现代Web设计的主流趋势
• 移动优先设计：随着移动设备用户数量的增加，设计师开始采用移动优先的设计理念，即首先为移动设备设计网页布局和样式，然后再逐步增强适应桌面设备。这种方法有助于确保网页在小屏幕上的可用性和性能

1.2 基本概念

1.2.1 基于网格布局

响应式 UI 基于网格布局。该网格可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种宽度的设计。网格列的数量取决于断点系统。

1.2.2 断点（根据宽度切换布局方式）

断点是响应式设计中的关键概念，它指的是屏幕宽度达到某个预设值时，布局会发生明显变化的点。通过设置断点，设计师可以为不同的屏幕尺寸定制不同的布局方案。

1.2.3 主要应用于横向空间，同时适配PC + 平板 + 手机

传统页面布局策略通常遵循这样一种原则：即内容的多少决定了页面的滚动长度。而页面的水平宽度则往往被设定为一个固定值，以确保在不同设备和浏览器上展示时的一致性和稳定性。然而，随着移动设备的多样化和用户浏览习惯的变化，固定的页面宽度已无法满足所有场景的需求。在这种情况下，响应式布局应运而生，其核心思想是使页面的宽度能够根据不同设备的屏幕尺寸动态调整。

二、实现方式

2.1 媒体查询

媒体查询是CSS3的一个特性，允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式规则。通过媒体查询，设计师可以为不同的设备和视口尺寸定制不同的布局和样式。

优点

• 灵活性高，可以针对不同的设备特性（如屏幕宽度、分辨率、设备方向等）应用不同的样式规则
• 允许创建复杂的响应式逻辑，如在横屏模式下调整布局或针对特定设备优化样式

缺点

• 可能导致CSS代码变得复杂和难以维护，特别是当有大量不同的设备和条件需要处理时
• 需要对各种设备和屏幕尺寸有深入的了解，以确保兼容性和一致性

使用场景

• 当需要为不同的设备或视口条件定制不同的布局和样式时
• 当设计需要考虑多种设备特性，如屏幕方向变化或高分辨率显示时

2.2 百分比

百分比宽度可以使元素的尺寸相对于其父容器进行缩放，从而实现响应式布局。百分比布局让元素能够根据父容器的大小变化而自动调整宽度，保持布局的灵活性。

优点

• 使得元素的大小能够相对于其父容器进行缩放，从而实现响应式效果
• 简单易用，对于基础的响应式布局非常有效

缺点

• 百分比布局可能在某些情况下不够精确，特别是在需要固定元素位置或大小时
• 可能需要结合其他技术（如视口单位）来实现更精细的控制
• 每个属性都使用百分比，会造成布局的复杂度较高

使用场景

• 当需要元素大小根据父容器的大小变化而变化时，如流体网格布局
• 对于简单的响应式调整，如改变容器的填充或边距

2.3 视口单位（vw/vh 和 vmin/vmax）

vw（视窗宽度单位）和vh（视窗高度单位）是基于视口大小的相对单位。使用这些单位，元素的尺寸可以与用户的视口大小同步变化，实现真正的响应式设计。

优点

• 基于视口的单位提供了一种与设备视口大小直接相关的方法来设置元素的尺寸
• 可以创建与视口大小成比例的布局，确保在不同设备上的视觉一致性

缺点

• 对于需要非常精确控制元素尺寸的情况，视口单位可能不够灵活
• 在某些复杂的布局中，过度依赖视口单位可能导致计算复杂和难以调试

使用场景

• 当设计需要元素大小与视口大小成比例时，如全屏背景图像或响应式图片
• 在需要考虑不同屏幕尺寸和分辨率的布局设计中

2.4 rem

rem（root em）单位是基于根元素（html元素）的字体大小的相对单位。通过设置根元素的字体大小，可以统一控制页面上所有使用rem单位的元素的尺寸，实现更好的响应性和可维护性。

优点

• rem单位基于根元素的字体大小，提供了一种一致性更强的方法来缩放元素
• 有助于保持设计的一致性和可访问性，因为所有尺寸都与根字体大小相关联

缺点

• 对于没有深入了解CSS的设计师或开发者来说，rem的计算可能有些复杂
• 在某些情况下，rem可能导致布局的缩放不如预期，特别是在与百分比或其他单位混合使用时

使用场景

• 当需要整个页面的尺寸和布局与根字体大小保持一致时
• 在创建可伸缩的排版和需要保持一致性的设计中

三、布局的几种类型

3.1 基础布局

3.1.1 固定

对于固定宽度的元素，确保它们在所有设备上都保持一致的尺寸，适用于那些不需要随屏幕尺寸变化的元素

3.1.2 流式

流式宽度的元素可以根据父容器的尺寸变化而动态调整宽度，适用于需要随屏幕尺寸变化的元素。

3.1.3 吸附（adhesion）

元素宽度是固定的，直到受到其他元素或断点的影响。参考产品：花瓣发现页

3.1.4 挤压

元素的宽度随着面板的出现而收缩

3.1.5 推出

推出宽度的元素在特定条件下会扩展到父容器之外，以显示额外的内容或功能。

3.1.6 遮盖

遮盖宽度的元素会根据内容的需要动态调整宽度，如果内容超出父容器，将会遮盖相邻元素

3.2 混合布局

3.2.1 固定+流式

这种布局方式结合了占满和固定两种布局方式的特点。元素的宽度可以动态调整以占满屏幕空间，而高度则保持固定不变。这种布局方式适用于那些需要充分利用屏幕宽度，但高度固定不变的场景。参考产品：UI中国、知乎等

3.2.2 流式+吸附（典型的响应式布局）

等比+断点布局是指在不同屏幕尺寸下，元素的宽度和高度按照等比缩放，但在某些特定的屏幕尺寸下会触发断点，使得元素的布局方式发生改变。这种布局方式可以在不同屏幕尺寸下实现更加灵活和适应性更强的布局。参考产品：站酷首页。

四、设计流程

4.1 确定常见的屏幕尺寸范围

通过对目标用户群体的设备使用情况进行研究，确定常见的屏幕尺寸范围，如小屏幕手机、中等屏幕平板和大屏幕桌面显示器。

4.2 确定适配规则

4.2.1 间距宽度不变，缩放内容区域

为每个布局区间制定具体的布局策略，包括元素的排列方式、大小和位置。

4.2.2 内容区域宽度不变，缩放两侧留白区域

为每个布局区间制定具体的布局策略，包括元素的排列方式、大小和位置。

4.2.3 混合缩放，内容区域与两侧留白区域同时变化

为每个布局区间制定具体的布局策略，包括元素的排列方式、大小和位置。

4.3 分解固定元素

4.3.1 区分固定元素与变化元素

确定页面中的哪些元素应该在不同屏幕尺寸下保持不变，哪些元素应该随屏幕尺寸变化而变化。

4.3.2 确定页面中固定元素的尺寸

对于页面中的固定元素，如Logo、导航栏等，为这些元素设定在不同屏幕尺寸下的尺寸和位置，确保其在任何设备上都具有良好的可见性和功能性。

4.4 确定卡片（模块）的布局变化规则

4.4.1 卡片位置变化

根据屏幕尺寸的变化，调整卡片的位置，使其在不同屏幕上都能合理布局。

4.4.2 卡片布局变化

改变卡片的排列方式，如从水平排列变为垂直排列，以适应不同屏幕尺寸的布局需求。

4.4.3 卡片数量变化

根据屏幕尺寸调整卡片的数量，例如在较小屏幕上减少卡片数量以简化内容，提高用户体验。

4.5  文本拉伸规则

4.5.1 溢出省略

对于过长的文本内容，采用溢出省略的方式显示部分内容，并用省略号表示剩余内容，确保页面布局不被破坏。

4.5.2 文本换行

根据屏幕尺寸调整文本的换行规则，使文本在不同屏幕尺寸下都能合理显示，避免布局被破坏。

4.6 图片拉伸规则

4.6.1 居中裁剪

在保持图片比例的同时，对图片进行裁剪以适应不同屏幕尺寸，确保图片内容的重点区域始终可见。

4.6.2 等比缩放

根据屏幕尺寸调整图片的大小，确保图片在不同屏幕尺寸下都能保持原始比例，避免变形或失真。

五、可见性适配行为

5.1 固定的

对于固定可见的元素，确保它们在所有设备上都保持可见，以提供稳定的用户体验。

5.2 可切换的

对于可切换的元素，根据屏幕尺寸和用户需求在显示和隐藏之间进行切换，以优化空间利用和用户体验。

5.3 临时的

临时可见的元素在特定条件下才会显示，如当用户与页面交互时，可以临时显示额外的信息或操作选项。

六、响应式模式

6.1 出现

出现模式指的是元素在用户滚动或触发某些动作时动态进入或退出视图的过程。

6.2 变形

变形模式描述元素如何根据用户交互或屏幕尺寸变化而改变形状、大小或布局。

6.3 分割

分割模式涉及将内容分割成多个部分，以适应不同的屏幕尺寸和布局需求。

6.4 重排

重排模式指的是元素在不同屏幕尺寸下重新排列，以优化空间利用和用户体验。

6.5 扩展

指的是元素或组件能够根据内容的多少或者用户的交互动作而增加额外的空间或者附加信息。这种模式常见于折叠面板、下拉菜单、模态窗口等交互元素。扩展模式的关键在于它提供了一种优雅的方式来处理额外的内容，而不是在所有时间里都将其展示出来，这样可以保持界面的整洁和减少不必要的干扰。

6.6 位移

涉及到元素在页面上的位置变化，以响应用户的交互或其他条件。这通常是为了重新组织页面布局，以便为新的内容腾出空间或者将用户的注意力引向特定的区域。位移可以是平滑的动画效果，也可以是简单的位置变动。需要谨慎使用，以确保用户不会被突然的布局变化所困扰。

七、结语

在进行产品设计时，我们经常会碰到包含多种元素的复杂设计单元，比如图文结合的布局，或者是更加多元的卡片、文本和图像的组合。面对这种复杂性，首要任务是将这些单元分解，审视并理解每个单独元素的适配需求。然后，我们需要综合考虑这些元素在尺寸、形态、数量以及排列上的变化，融合这些变化来制定一套综合的适配计划。这样的过程旨在保证不论是在何种设备或屏幕尺寸上，这些设计单元都能维持其原有的功能和视觉效果，进而为用户提供优质的体验。

虽然开发团队可能依赖于他们的经验或遵循既定的设计标准来执行适配任务，并不总是需要设计师提供详尽的适配指导，但设计师对适配原则的理解和掌握对于打造适用于所有用户设备的连贯体验至关重要。这种专业知识不仅能够提高设计工作的效率和产出的质量，还能促进与开发团队的有效合作，共同推动产品的成功开发。

Powered by Froala Editor