响应式和自适应的区别？
发布时间：2018-09-11
发布者：eidea
浏览次数：1655
最开始出现的一种新的布局方式其实是宽度自适应布局。我们平时谈论的自适应布局，大部分时候指的就是宽度自适应布局。 自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。 如下图所示：
从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。
这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。
响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。如下图所示：
响应式布局：网页内容和布局随着屏幕尺寸变化而变化
网络上也有网友用这么一张图来总结响应式和自适应的区别：
如上图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。
而如果用自适应布局去处理的话，那不管访问设备如何的不同（上图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。
进一步详细说明，如下图所示，屏幕宽度大于720像素，则4张图片并排在一行：
如果屏幕宽度在不大于720像素，则4张图片分成两行：
如果屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：
其实响应式和自适应两种布局方式从外观上很难分辨，但从技术角度来说他们运行的机理不同。所以最后从技术角度再来总结一下两者的区别：
响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。
自适应是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备
本文摘自互联网，如有侵权，请联系删除！
从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。
这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。
响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。如下图所示：
响应式布局：网页内容和布局随着屏幕尺寸变化而变化
网络上也有网友用这么一张图来总结响应式和自适应的区别：
如上图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。
而如果用自适应布局去处理的话，那不管访问设备如何的不同（上图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。
进一步详细说明，如下图所示，屏幕宽度大于720像素，则4张图片并排在一行：
如果屏幕宽度在不大于720像素，则4张图片分成两行：
如果屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：
其实响应式和自适应两种布局方式从外观上很难分辨，但从技术角度来说他们运行的机理不同。所以最后从技术角度再来总结一下两者的区别：
响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。
自适应是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备
本文摘自互联网，如有侵权，请联系删除！
相关新闻推荐
- 网站建设中，什么样的网站设计才是最好的呢? 2018-08-21
- 公司建设网站的出发点是什么? 2019-05-23
- 广州品牌网站建设哪家公司比较好？ 2018-12-20
- 干货 | 网络营销记忆联想法则 2018-07-31
- 企业网站制作如何突出网站特点？ 2019-06-27
- 网站建设的核心内容 2018-08-23
网站案例欣赏
-
-
莱佛士教育学院
教育培训行业响应式官网
-
-
墨尘建筑事务所
响应式企业官网
-
-
西安国际社区时尚小镇运营管理有限公司
高端响应式企业官网