什么是自适应设计？ （与响应式设计有什么不同吗？）

Responsive design is a term we all should be familiar with by now but does the term accurately describe what we think it means? We’ve come to know "responsive design" to be the act of designing websites that display correctly on all devices and screen sizes. But some argue that “adaptive design” is a better name for this.

响应式设计是我们现在都应该熟悉的术语，但是该术语是否准确地描述了我们认为的含义？ 我们已经知道“响应式设计”是设计可在所有设备和屏幕尺寸上正确显示的网站的行为。 但是有人认为“自适应设计”是个更好的名字。

• Is this true, or are they the same thing?
  这是真的，还是同一回事？
• Or does "adaptive design" mean something else entirely?
  还是“自适应设计”完全意味着其他含义？
• And where does "fluid design" fit into all this?
  “流体设计”在哪里适合所有这些呢？

While this sounded like a fairly straight forward question, after a little investigation, I found it was more ambiguous than I might have guessed, and maybe even downright controversial.

尽管这听起来像是一个很简单的问题，但经过一番调查，我发现它比我想像的要更加模棱两可，甚至可能引起争议。

There seem to be two competing definitions for adaptive:

对于自适应，似乎有两个相互竞争的定义：

定义1：响应式设计是自拍杆–自适应设计是伞 (Definition 1: Responsive Design is a Selfie Stick – Adaptive Design is an Umbrella)

In this definition, a responsively-designed product – just like the selfie stick – can be used in many states from fully extended, fully retracted and any of the points in-between. Sure, certain widths or breakpoints are more important than others, but every different width generates a slightly different layout.

在这个定义中，响应性设计的产品(就像自拍杆一样)可以在完全伸展，完全缩回以及介于两者之间的任何位置的许多状态下使用。 当然，某些宽度或断点比其他宽度或断点更重要，但每个不同的宽度都会产生略有不同的布局。

Adaptive design behaves more like an umbrella. It has preset 'states' that it is designed to work at – open to stop rain, closed for transporting. The 'in-between states' are unimportant.

自适应设计的行为更像是一把雨伞。 它具有预设的“状态”，可以在工作状态下使用-打开以阻止雨水，关闭以进行运输。 “中间状态”并不重要。

Selfie Stick vs Umbrella

自拍杆vs雨伞

There are a number of GIF animations that illustrate this concept nicely.

有许多GIF动画很好地说明了这一概念。

In 2015, Geoff Graham outlined his view on the differences, saying that responsive layouts adapt to the browsers' width at any given moment in time, whereas 'adaptive layouts' adapt to the browsers' width only at specific breakpoints.

2015年， Geoff Graham概述了他对差异的看法，他说响应式布局在任何给定的时间都会适应浏览器的宽度，而“自适应布局”仅在特定的断点适应浏览器的宽度。

Geoff said that responsive design is based on percentages (i.e. the same thing as fluid design), and adaptive design is based on fixed units of measurements. Both are powered by CSS media queries.

杰夫说，自适应设计基于百分比 (即与流体设计相同)，自适应设计基于固定的测量单位 。 两者均由CSS媒体查询提供支持。

定义2：自适应设计可对整个设备环境(不仅仅是屏幕)做出响应 (Definition 2: Adaptive design responds itself to the entire device environment (not just the screen))

However, as you can see from the comments below Geoff's article, not everyone agrees with this definition.

但是，正如您从Geoff的文章下面的评论中看到的那样 ，并不是每个人都同意这个定义。

Here's the top comment:

这是最重要的评论：

"Responsive design can be fluid or fixed, so can adaptive. The difference is that responsive design doesn’t care about what browser is used, it responds to the browser size and reflows the layout accordingly. On the other hand, adaptive design adapts to the browser environment specifically, and may or may not take into account the browser’s current size." ⏤ zzzzBov.

“ 自适应设计可以是可变的或固定的，因此可以是自适应的。区别在于，自适应设计并不关心所使用的浏览器，它响应浏览器的大小并相应地重新布局。另一方面，自适应设计可以适应特定于浏览器环境，并且可能会也可能不会考虑浏览器的当前大小 。

By zzzzBov’s definition, Adaptive Design is JavaScript-driven and is as much about the reacting to the type of device as it about screen sizes. For instance, a tablet may have a high-resolution screen, yet it needs larger touch targets. A phone might need a different navigation system.

根据zzzzBov的定义，自适应设计是JavaScript驱动的，它对设备类型的React与对屏幕尺寸的React一样重要。 例如，平板电脑可能具有高分辨率的屏幕，但它需要更大的触摸目标。 手机可能需要其他导航系统。

Many big names have weighed-in with their opinions, ranging from UXPin to Mozilla but it still appears to be unresolved.

从UXPin到Mozilla ，许多大人物都发表了自己的看法，但似乎仍未解决。

这是我的事 (Here's My Take on the Matter)

Let's use an adjustable lamp as a real-world example: responsive design is when you flick the switch, and the lamp responds by turning on the light. Adaptive design is when you’re able to adjust/adapt the lamp so that you can see better.

让我们以可调灯为例： 响应式设计是您轻按开关时，灯会通过打开灯来做出响应 。 自适应设计是指您能够调节/ 调整灯泡以使其看得更好。

If a website doesn’t respond to your interaction, it’s not very responsive, and if it isn’t able to adapt to its surroundings (i.e. the device screen), it’s not very adaptive. Both of these can significantly impact the UX.

如果网站对您的互动没有响应，则响应速度不佳；如果网站无法适应周围环境(例如设备屏幕)，则适应性也不强。 这两个因素都会严重影响UX。

为什么响应式设计不是响应式设计 (Why Responsive Design Isn’t Responsive Design)

A response is an action as a result of another action, for example, if a website button changes its background color when the user hovers over it — the action is the hover, and the response is the background color being changed.

响应是另一个操作的结果，例如，当用户将鼠标悬停在某个网站按钮上时，如果网站按钮更改了背景颜色，则该操作为悬停，而响应为背景色被更改。

Ordinarily, when we say that a website is responsive, we mean that it adapts to any screen size on any device, but in actuality, it should mean that it responds to user interaction. Here’s why:

通常，当我们说网站具有响应能力时，我们指的是它可以适应任何设备上的任何屏幕尺寸，但是实际上，这应该意味着它可以响应用户交互 。 原因如下：

A user cannot resize the browser on their mobile device. And while a user can change the browser size on a desktop computer, they don't typically need to do that to interact with a website — it’s not a normal user interaction. Sure, us web designers often resize the browser to test a website, but it’s not a normal action for the user.

用户无法在其移动设备上调整浏览器的大小。 尽管用户可以在台式计算机上更改浏览器的大小，但通常不需要这样做即可与网站进行交互–这不是正常的用户交互。 当然，我们的网页设计师经常会调整浏览器的大小来测试网站，但这对用户而言并不是正常的举动。

为什么我认为“自适应设计”更准确 (Why I Think “Adaptive Design” Is More Accurate)

Since screen sizes are generally used in their default state (in the sense that you can’t or wouldn’t need to resize it), the term “adaptive design” might fit the bill more accurately. Websites (well-designed ones at least) will modify their layout to fit the device of the user; it’s an involuntarily action, meaning the user doesn’t have to interact with the website to make it adapt. Adaptive design could also describe how we optimize loading times and perceived performance for smaller, handheld devices.

由于屏幕尺寸通常在其默认状态下使用(从某种意义上说，您不需要或不需要调整它的尺寸)，因此“自适应设计”一词可能更准确。 网站(至少设计良好的网站)将修改其布局以适合用户的设备； 这是非自愿的操作，这意味着用户无需与网站进行交互即可适应网站。 自适应设计还可以描述我们如何优化小型手持设备的加载时间和感知性能。

那么，什么是流体设计？ (So What’s Fluid Design Then?)

Back in the early 2000’s, the big debate was ‘Fixed Layout vs. Fluid Layout’. Fluid design layouts were set with percentages, stretching to fit the frame of the browser. Fixed layouts were set at locked a single layout determined by a pixel width.

早在2000年代初期，最大的争论是“固定布局与流体布局”。 流畅的设计布局按百分比设置，并进行拉伸以适合浏览器的框架。 固定版式设置为锁定由像素宽度确定的单个版式。

Neither was ideal. Fixed layouts looked great on the right screen but were unusable on small monitors. Fluid layouts were more flexible but looked thin and stringy on wide screen monitors.

两者都不是理想的。 固定的布局在右侧屏幕上看起来不错，但在小型显示器上无法使用。 流畅的布局更灵活，但在宽屏显示器上显得稀薄而细腻。

Responsive Design was Ethan Marcotte’s direct response – no pun intended – to these design quandaries. Classic ‘stretchy’ RWD is like a mature, ‘grown-up’ version of fluid design – stretching to fill the window, but reorganizing itself when necessary.

响应式设计是Ethan Marcotte对这些设计难题的直接响应-并非双关语。 经典的“拉伸式”后轮驱动就像是流体设计的成熟的“成年式”版本-拉伸以填充车窗，但在必要时进行自我重组。

Geoff’s definition of adaptive design – though not agreed upon by many – is like a ‘grown-up version of fixed design’ – not a single fixed layout, but 3, 4 or more layouts.

杰夫(Geoff)对自适应设计的定义-尽管没有得到很多人的认可-就像“固定设计的成熟版本” –不是单个固定布局，而是3、4或更多布局。

结论 (Conclusion)

So there you have it, my take on responsive and adaptive design. After reading this article, will you change the way that talk about these terms, or is it easier to carry on talking about responsive design as a way to make websites adapt to multiple screen sizes?

因此，我拥有响应式和自适应设计。 阅读本文之后，您是否会更改谈论这些术语的方式，还是继续谈论响应式设计作为使网站适应多种屏幕尺寸的方式更容易？

Have you ever used the term “adaptive design” and received nothing more than a blank stare?

您是否曾经使用过“自适应设计”一词，而只是茫然无措？

I’m curious, let me know in the comments below!

我很好奇，请在下面的评论中告诉我！

(No fighting please!).

(请不要打架！)。

翻译自: https://www.sitepoint.com/adaptive-design-different-responsive-design/