响应式网站和自适应网站点的区别

1、响应网站的起源

一开始，网站会设计成固定宽度的页面。一开始电脑显示器的分辨率不多，因为那时电脑的使用量比较少。即使有变化，它们也是800, 900, 1050、1200等等。例如，GitHub的网页定制一个固定宽度的1020px。

后来，随着越来越多的显示器，以及笔记本电脑的普及，这种方式的网页出现了问题。在大屏幕显示器上，整个页面特别小，小屏幕显示上的滚动条导致用户体验非常糟糕。为了解决如何正确显示网站中各种不同尺寸和分辨率的设备，也出现了很多方案。

提供不同的版本：第一种解决方案是为不同的设备提供不同版本的Web页面。例如，一个站点为PC、莫比尔和PAD提供三种不同的版本。这保证了效果，但同时维护多个版本更麻烦，网站上有多个条目，这将大大增加系统架构的复杂性。

自适应性：后来人们开始思考，如果他们能“立即设计，普遍应用”，也就是说，使同一页能够自动适应不同大小的设备，从而解决不同设备的不同页面问题。这就是所谓的自适应布局解决方案。

响应：使用自适应布局，如果设备太小，即使网页可以匹配屏幕大小，如果内容太小，则看不清。为了解决这个问题，一种新的布局方式，即响应布局。

2、反应与适应的区别

给出两个具体例子，让你感受到两种效果的效果。

网站响应https://www.microsoft.com/zh-cn/

自适应Web站点：http://m.ctrip.com/html5/

设计了响应和自适应两种布局方法，解决了在不同大小和分辨率的设备上正确显示网页的问题。不同的是，这两种布局方式有不同的解决方案。

布局最重要的新方法之一是宽度自适应布局。我们通常谈论的自适应布局大部分是指宽度自适应布局。自适应是解决同一网页在不同大小和分辨率的设备上呈现的方法。在网页内容和布局主题基本保持不变的前提下，同一页面自动适应不同大小和分辨率的设备，并根据设备的屏幕宽度自动调整网页内容。如下图所示：

自适应布局：网页的内容和布局完全相同。

从上面可以看出，在使用自适应布局时，无论屏幕大小，同一页面的内容和布局基本相同。区别只是内容的大小。

这将造成一个问题，即如果设备太小，即使网页能适应屏幕大小，也不会清晰到在小屏幕上显示太多内容，这将极大地损害用户体验。

响应布局是解决这一问题的一种新的布局方式。它能自动识别屏幕大小，做出相应的网页设计调整。页面布局和显示内容可能会随着屏幕大小的变化而变化。如下图所示：

响应布局：网页的内容和布局随着屏幕的大小而变化

在网上，一个网友也会用这样的图片来总结一下反应和适应的区别。

如上所示，对于同一页（图片中的HTML），如果我们使用响应布局来处理它，我们可以用不同的设备（计算机、平板电脑、手机）访问页面，最后看到布局和内容是完全不同的。

如果我们采用自适应布局来处理，不管接入设备有多大不同，（上面是三种不同大小的手机），最后一页的内容和布局基本上是相同的，即大小略有不同。

更详细地，如下图所示，屏幕的宽度大于720像素，然后将4张图片按一行排列：

如果屏幕宽度不超过720像素，则将4张图片分成两行。

如果屏幕的宽度小于600像素，则网站的主要导航从平面转向下降。

上一篇：百度竞价推广效果不理想的八个原因

下一篇：网站建设优化时如何写好网站优化标题