当前位置:首页 >教程首页 > 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期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答
  • 2d建模师工资一般多少

    2D建模师是指使用2D软件进行建模的专业人员,是游戏开发过程中不可或缺的一个环节,主要用于绘制游戏的角色、场景、道具等元素。当......

  • 游戏剪辑师要学多久

    游戏产业已成为了一个庞大的产业链,不仅是游戏开发和发行,还包括游戏赛事、直播、内容创作等。而游戏剪辑恰恰是这些内容创作中的一环......

  • 游戏剪辑软件哪个好用

    游戏剪辑作为游戏视频制作的一种重要方式,随着游戏行业的蓬勃发展而越来越受到重视。随着游戏制作技术的提高,游戏剪辑的制作越来越复......

  • 游戏剪辑视频赚钱吗

    在游戏剪辑中,通过将游戏录像的精彩时刻进行剪辑和编辑、添加音乐、音效和特效等元素,创造出视觉上令人兴奋的故事情节,是游戏剪辑师......

  • 游戏剪辑视频怎么做好

    游戏剪辑视频是近年来随着电竞产业的发展而崛起的一项新兴职业。在游戏社区和电竞圈中很受欢迎的。但是游戏剪辑视频的制作需要具备一定......

  • 游戏剪辑工作怎么样

    游戏剪辑是一种将游戏画面和声音进行剪辑和编辑,制作成视频的过程。它是随着游戏产业的发展而出现的,而且随着游戏产业的发展,游戏剪......

×