Responsive design 响应性设计与适应性设计

您能简单地解释一下RWD（响应式网页设计）和AWD（自适应网页设计）之间的区别吗？

自适应（AWD）：不一定设置在流体网格上；针对特定的设备分辨率（320、768、1024等）；可以具有由媒体查询控制的设置宽度（固定）或相对宽度（%）

响应式（RWD）：建立在流体网格上；无论屏幕分辨率如何，都会随浏览器而变化；如果需要，内容可以拆分并重新对齐

简言之：RWD与AWD类似，只是进一步采取了一两步，以便为未知设备和已知设备提供经得起未来考验的设计。

来自：

伊桑·马科特（Ethan Marcotte）创造的“响应性网页设计”的意思是“流动性” 网格、流体图像/媒体和媒体查询 我使用它是为了创建适应用户需求的界面 能力（就形式和功能而言）。对我来说，“适应性” “网页设计”只是“渐进增强”的另一个术语 哪种响应性的网页设计可以（通常应该）成为不可分割的一部分， 但是对于网页设计来说，更全面的方法是什么呢 考虑到不同级别的标记、CSS、JavaScript和辅助 技术支持

为了记录在案，我认为区分是很重要的 在“自适应网页设计”和“自适应布局”之间，因为“自适应 “布局”仅表示使用媒体查询，这可能无法完成 以逐步增强的方式。在一个应用程序中实现的自适应布局 然而，移动优先的方式很可能是渐进式的增强 因此，这是一种“自适应网页设计”的手段

流体布局 随着屏幕宽度的增加或增加，以文字换行方式进行调整 减少

自适应布局 有预先确定的尺寸，不同的布局被触发。 这些被称为断点。自适应布局可以是流体或流体 或者完全静止

响应布局 流体和自适应布局的组合。提供最佳体验

渐进增强 通过应用来表彰您的内容（和用户）的过程 智能化技术，层层。渐进式增强不需要在不同的浏览器中提供相同的体验

资料来源：

简单地说：

RWD（响应性）：是针对特定设备的网站的不同结构和设计。 （我们主要讨论的是服务器端工作，因为我们讨论的是不同的结构和不同的功能）

AWD（自适应）：是针对特定设备的具有相同结构的不同设计。 （我们主要讨论客户端工作，因为我们只讨论不同的设计）

---

请注意，这两种技术都旨在为特定设备创造不同的用户体验，使其更加友好

我所看到的另一种定义根据神奇发生的地方将其分解：

• 响应性——客户端——所有设备都会返回相同的页面，但页面的显示会响应设备，通常使用JavaScript和CSS（尤其是媒体查询）
• 自适应--服务器端--将有关设备规格的信息传递给服务器，并返回适合该设备的页面。这将使用一些与RWD相同的JavaScript/CSS技术，但一些内容可能不同/更小

资料来源：

---

不确定此定义与其他一些更关注页面内容流的定义如何匹配。

这是区分流畅、固定、响应和自适应布局的最佳链接之一。 . 简单地说，就是html页面中应用的样式

固定布局：使用像素

流体布局：使用百分比

响应式布局：仅在媒体查询中使用百分比

自适应布局：在媒体查询中同时使用像素和百分比

---

适应性网页设计和响应性网页设计之间的差异比本文中提出的区别更广泛、更重要。不同之处既不是软件功能所在的位置，也不是CSS条件下使用的度量单位

这两个术语（适应性或响应性）都不是一个品牌，因此我们不应该偏离这些词的基本定义。在计算机科学中，反应是在某种刺激下产生的动作、事件或信息。这个定义起源于生物学。瞳孔对光的反应是一种反应灵敏的设计

自适应是指比简单的编程响应更高的功能。瞳孔扩大的能力是一种适应性设计。适应需要存储历史及其以后的应用。在生物学中，适应需要DNA来储存适应。在web设计中，修改可以存储在服务器上的Cookie或用户帐户配置文件中

让我们从两者中较简单的一个开始。响应式web设计的良好形式定义如下：

响应式web设计检查显示特性，并以超越HTML内置自动布局功能的方式在页面显示中即时响应，从而在不同的显示条件下提供方便、功能性和最大可见的体验

便携式设备提高了这种额外尺寸响应能力的重要性。许多这样的设计技术都以向CSS（层叠样式表）或通过脚本（如JavaScript）添加条件为中心。基于显示特性的每个条件通过控制特定样式pa的值来改善总体用户体验