当前位置:首页 >教程首页 > IT 学院 > WEB前端+全栈工程师班 >什么是响应式网站?什么是自适应网站?怎样区分?

什么是响应式网站?什么是自适应网站?怎样区分?

发布时间:2020-10-23 09:33:25

很长一段时间以来,都以为响应式网站就是自适应网站,这是两个一样的概念。后来机缘巧合认识了一位前端大拿,给我好好上了一课,终于能把这两种网站前端表现形式给讲透了。现摘录如下:

1、响应式网站由来

最开始网站都会被设计成固定宽度的页面,最开始的PC显示器的分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800、900、1050、1200等几种。比如 GitHub的网页就是固定宽度为1020px来定制的。

后来随着显示器越来越多,以及笔记本的普及,这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小,在小屏显示器上网页又出现滚动条导致用户体验极其的差。为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题,前前后后也出现了好多种方案。

提供不同版本:最开始的解决方法,是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做固然保证了效果,但同时要维护好几个版本比较麻烦,而且网站有多个入口,会大大增加系统架构的复杂度。

自适应:后来人们就开始想能不能"一次设计,普遍适用",即让同一个页面自动适应不同大小的设备,从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。

响应式: 采用自适应布局的话,如果设备太小,就算网页能够根据屏幕大小进行适配,但是在太小屏幕显示内容过多会看不清楚。为了解决这个问题而衍生出来的一种新的布局方式,那就是响应式布局。

2、响应式和自适应的区别

先给出两个具体例子让大家直观感受一下两种的效果:

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

自适应网站:http://m.ctrip.com/html5/

响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。不同的是两种布局方式采取了不同的解决方法而已。

最开始出现的一种新的布局方式其实是宽度自适应布局。我们平时谈论的自适应布局,大部分时候指的就是宽度自适应布局。 自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下,让同一张个页面自动适应不同大小和分辨率的设备,根据设备屏幕宽度,自动调整网页内容大小。 如下图所示:

什么是响应式网站?什么是自适应网站?怎样区分?

自适应布局:网页内容和布局完全一样

从上图可以看出采用自适应布局的话,不管设备屏幕尺寸如何变化,打开同一个页面看到的内容和布局基本上是一样的,不同的只是内容的尺寸。

这样就会引发一个问题,那就是如果设备太小,就算网页能够根据屏幕大小进行适配,但是在太小屏幕显示内容过多会看不清楚,从而极大损害用户体验。

响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计,页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。如下图所示:

什么是响应式网站?什么是自适应网站?怎样区分?

响应式布局:网页内容和布局随着屏幕尺寸变化而变化

网络上也有网友用这么一张图来总结响应式和自适应的区别:

什么是响应式网站?什么是自适应网站?怎样区分?

如上图所示,对于同一个页面(图中的Html),如果用响应式布局来处理的话,用不同设备(电脑、平板、手机)去访问此页面,最后看到的布局和内容有很大不同。

而如果用自适应布局去处理的话,那不管访问设备如何的不同(上图是三台尺寸不一样的手机),最后看到的页面内容和布局基本上还是一样的,就是尺寸略有不同。

进一步详细说明,如下图所示,屏幕宽度大于720像素,则4张图片并排在一行:

什么是响应式网站?什么是自适应网站?怎样区分?

如果屏幕宽度在不大于720像素,则4张图片分成两行:

什么是响应式网站?什么是自适应网站?怎样区分?

如果屏幕宽度在小于600像素话,网站主导航由平铺变成了下拉:

什么是响应式网站?什么是自适应网站?怎样区分?

其实响应式和自适应两种布局方式从外观上很难分辨,但从技术角度来说他们运行的机理不同。所以最后从技术角度再来总结一下两者的区别:

响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后,脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容,并且一直通过本地脚本在监听屏幕大小的变化,随时做出样式响应的变化,这是主动的。

自适应是用户请求访问时会夹带设备信息,服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS,返回给浏览器以这种方式响应不同设备。

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答
  • 学电脑培训有哪些课程

    电脑已经是我们生活和工作离不开的工具了,不论是从事什么样的工作,不论是使用什么样的软件,都是需要运用互联网技术的。而想要掌握这......

  • 电脑培训机构学什么比较好啊

    在当下互联网时代,如果不会电脑,是很难找到好工作的,几乎很多岗位都是要基于电脑完成的。不过,不同的电脑培训,他们的课程是不一样......

  • 天津电脑设计培训学校哪家好

    电脑设计是现在艺术和电脑计算机相结合的产物,是设计中最为常见的设计方式,目前主要应用在平面设计、包装设计、产品设计、影视行业、......

  • 菏泽影视制作培训学校有哪些

    影视作品是离不开影视制作的。影视制作包括调色、加画面效果,加文字效果,加特效等后期处理,而学习影视制作也是很有就业前景的,可以......

  • 北京cad培训机构十个排名榜

    CAD就是目前全使用非常广泛的制图软件之一。在很多方面都会涉及到,比如说我们常见的工程上的应用,如建筑设计图纸,装修设计图纸,......

  • 大连影视制作培训学校排名

    影视制作在影视行业是非常重要的,尤其是当下影视行业的发展,对影视制作人才的需求扩大。当然学习影视制作技术也是一个不错的选择,不......

×
扫码快速获取
×