从平板电脑到手机，再到大型台式电脑，全球使用的设备数以百万计。设备用户希望能够无缝地在这些设备上查看相同的网站。响应式网站设计是一种用于确保网站能够在所有屏幕大小上查看的方法，而不考虑设备。

什么是响应式网站设计(responsive website design)？

响应式web设计是一种使网站内容和总体设计能够根据您用来查看的设备进行移动和更改的方法。换句话说，响应网站响应设备并相应地呈现网站。

例如，如果您现在调整此窗口的大小，Lifewire网站将不断移动以适应新窗口的大小。如果您在移动设备上打开网站，您会注意到我们的内容会调整为一列以适合您的设备。

简史

尽管早在2004年就出现了诸如“流畅”和“灵活”等其他术语，但响应式网页设计是由伊桑·马科特（Ethan Marcotte）于2010年首创并引入的。他认为，网站的设计应该针对“事物的起伏”而不是保持静态。

在他发表了题为“响应式Web设计”的文章后，这个词开始流行起来，并开始激励全球的Web开发人员。

响应式网站是如何工作的？

响应性网站是为了在特定的大小（也称为断点）上调整和调整大小而构建的。这些断点是具有特定CSS媒体查询的浏览器宽度，一旦处于特定范围内，该查询将更改浏览器的布局。

大多数网站都会为移动设备和平板电脑设置两个标准断点。

简单地说，当您更改浏览器的宽度时，无论是通过调整浏览器的大小还是在移动设备上查看浏览器，后面的代码都会响应并自动更改布局。

为什么响应性设计很重要？

由于其灵活性，响应性网页设计现在是任何网站的黄金标准。但是，为什么它如此重要？

• 现场体验：响应式web设计确保网站为任何互联网用户提供无缝和高质量的现场体验，无论他们使用的是什么设备。
• 内容聚焦：对于移动用户来说，响应式设计确保他们首先只看到最重要的内容和信息，而不是由于大小限制而只看到一个小片段。
• 谷歌认可：响应式设计使谷歌更容易为页面分配索引属性，而不需要为不同设备的多个单独页面编制索引。当然，这会提高你的搜索引擎排名，因为谷歌对首先是移动的网站微笑。
• 生产力节约：在过去，开发者必须为桌面和移动设备创建完全不同的网站。现在，快速响应的web设计使得更新一个网站上的内容成为可能，而不是多个网站上的内容，从而节省了大量的时间。
• 更好的转化率：对于试图接触在线受众的企业来说，响应式网页设计被证明可以提高转化率，帮助他们发展业务。
• 提高页面速度：网站加载速度将直接影响用户体验和搜索引擎排名。响应性网页设计确保页面在所有设备上的加载速度相同，以积极的方式影响排名和体验。

真实世界中的响应性设计

响应式设计如何影响现实世界中的互联网用户？考虑一个大家都熟悉的行为：网上购物。

用户可以在午休时间在桌面上开始产品搜索。在找到一个他们考虑购买的产品后，他们将其添加到购物车中，然后重新开始工作。

大多数用户在购买之前都喜欢阅读评论。因此，用户再次访问该网站，这一次是在家里的平板电脑上，阅读该产品的评论。然后他们必须再次放弃网站继续他们的夜晚。

那天晚上，在他们关灯之前，他们拿起移动设备再次访问网站。这一次，他们准备进行最后的购买。

快速响应的网页设计确保用户可以在桌面上搜索产品，在平板电脑上阅读评论，并通过手机无缝完成最终购买。

其他现实场景

在线购物只是其中一个场景，响应性设计对在线体验至关重要。其他现实场景包括：

• 计划旅行
• 寻找一个新的房子购买
• 研究家庭度假的想法
• 查找食谱
• 关注新闻或社交媒体

随着时间的推移，这些场景中的每一个都可能跨越广泛的设备。这突出了具有响应性的网站设计的重要性。