如何去做好响应式设计？

对于大多数网页设计师来说，你的成品需要在各种类型和尺寸的设备上进行外观和工作，这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。

这一切都归结为选择响应式或自适应设计模型，以实现任何规模的一致网站设计。

但是响应式和自适应之间有什么区别？它们真的只是一回事吗？让我们来看看并解释你需要知道的一切。喜欢记得关注UI范，每天更新，打造你的知识武器库！

1.与设备无关的设计的两种方法

就其核心而言，响应式和自适应技术在最终用户看来可能是一样的。创建设计和开发方法都是为了使网站在所有设备类型上都具有良好的外观和功能。

主要区别在你如何使用响应式或自适应技术创建网站。

2.响应式设计

响应式设计是任何使用网站的人的“家庭”术语。也许几乎令人惊讶的是，它并没有那么老。它是由Ethan Marcotte在 2010 年创造的：

现在比以往任何时候都更重要的是，我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为事物的潮起潮落而设计”。

而这正是我们目前关于响应式网站的思想学派的起点。

响应式设计是一种技术，其中网站在任何给定尺寸下“响应”浏览器的尺寸，以便针对屏幕优化设计。理想情况下，用户应该从单个网站获得相同的体验，无论他们是在只有几百像素宽的移动设备上手持它还是在超宽屏幕显示器上观看它。

响应式网站使用了许多你可能熟悉的元素：媒体查询、灵活的网格和响应式图像。它可能是针对多种屏幕尺寸进行设计的最流行方法。（纯粹主义者会注意到响应式设计与设备本身无关，只与大小有关，而不是自适应，它在完美渲染的道路上检测设备类型等。）

根据交互设计基金会的说法，响应式设计更容易，实现的工作更少。这可能是它被更广泛使用的原因。

响应式设计师创建一个单一的设计，用于所有屏幕，通常会从分辨率的中间开始，并使用媒体查询来确定将对分辨率标度的低端和高端进行哪些调整。这往往会让用户感到高兴，因为熟悉的网页设计似乎保证可以转换到任何设备的屏幕上。均匀性和无缝性是提供良好用户体验的关键考虑因素。

此外，由于涉及开发时间，响应式设计通常是大型网站的选择。响应式设计植根于网格系统，响应式测量（考虑百分比或最小值和最大值）可帮助设计以不同的尺寸扩展、收缩和堆叠。

这种设计技术是新开发的规范。

3.响应式设计的优点

3.响应式设计的缺点

4.适应性设计

自适应设计几乎与响应式设计一样古老。该技术于 2011 年首次使用，涉及针对特定设备尺寸和类型进行设计，以获得更加个性化的体验。

这是来自MDN Web Docs 档案的一个很好的解释：“自适应设计更像是渐进增强的现代定义。自适应设计不是一种灵活的设计，而是检测设备和其他特征，然后根据一组预定义的视口大小和其他特征提供适当的特征和布局。”

设计植根于六种固定变化（宽度）：

自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。

5.自适应设计的优点

6.自适应设计的缺点

文章来源：站酷作者：UI范

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

分享本文至：