当前位置:首页 > 网站维护 > 列表

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

来源:浦一科技点击:时间:2018/9/10 关键词:上海网站建设
1、响应网站的起源一开始,网站会设计成固定宽度的页面。一开始电脑显示器的分辨率不多,因为那时电脑的使用量比较少。即使有变化,它们也是800,900,1050、1200等等。例如,GitHub的网页定制一个固定宽度的1020px。后来,随着越来越多的显示器,以及

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像素,则网站的主要导航从平面转向下降。

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词