响应式布局和自适应布局有什么区别?

2016-12-21 10:30  阅读 1,404 次 评论 0 条

在移动站建设和优化中,我们经常会听到响应式和自适应这两个名词,这两者之间有什么区别呢?如何判断是响应式布局还是自适应布局呢?

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小,但是无论怎样,他们主体的内容和布局是没有变的。自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤。

响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。

上面所说的,大家可能未必能够理解,下面结合几个例子,再来理解上面的话,相信大家能够明白。

首先推荐一个网站:http://www.shejidaren.com/examples/responsive-web-design/ 大家可直接打开访问。

静态布局效果

在这个网站上你可以直接的体验自适应、响应式、液态、静态几种布局的不同之处,我们来体验一下自适应和响应式。

自适应布局效果

自适应

响应式布局效果

响应式

我们可以看出,在相同宽度的情况下,响应式的布局和内容进行了调整,自适应则没有。我们再以多尺寸浏览插件来看一下小屏幕上网页内容的显示效果,我们仍然使用相同的尺寸来看两者的效果:

自适应小屏幕布局效果

自适应

响应式小屏幕布局效果

响应式

可以看出,响应式的布局和内容进行了调整。大家可以自己去体验一番,开启多尺寸浏览插件,根据宽度来看效果,这个更直观明了。

本文地址:http://www.liuxinseo.com/1372.html
版权声明:本文为原创文章,版权归 星雨 所有,欢迎分享本文,转载请保留出处!

发表评论


表情