在移动站建设和优化中,我们经常会听到响应式和自适应这两个名词,这两者之间有什么区别呢?如何判断是响应式布局还是自适应布局呢?
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小,但是无论怎样,他们主体的内容和布局是没有变的。自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤。
响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。
上面所说的,大家可能未必能够理解,下面结合几个例子,再来理解上面的话,相信大家能够明白。
首先推荐一个网站:http://www.shejidaren.com/examples/responsive-web-design/ 大家可直接打开访问。
在这个网站上你可以直接的体验自适应、响应式、液态、静态几种布局的不同之处,我们来体验一下自适应和响应式。
自适应
响应式
我们可以看出,在相同宽度的情况下,响应式的布局和内容进行了调整,自适应则没有。我们再以多尺寸浏览插件来看一下小屏幕上网页内容的显示效果,我们仍然使用相同的尺寸来看两者的效果:
自适应
响应式
可以看出,响应式的布局和内容进行了调整。大家可以自己去体验一番,开启多尺寸浏览插件,根据宽度来看效果,这个更直观明了。