做有价值的网站,助力企业发展!

专注于企业网站建设、营销型网站建设、Web/微网站建设、企业营销推广

百度地图|网站地图|RSS地图

服务热线:

133-8386-7325

当前位置:郑州伟之琦计算机科技 > 新闻中心 >> 建站相关 >>

自适应网页设计和响应式网页设计的区别

最近和多位业内的朋友聊起了自适应网页设计和响应式网页设计的区别,很多人都对这两个概念有所混淆,今天郑州网站建设公司伟之琦的小编就和大家一起把这两种网页设计类型梳理一下吧。


 

自适应网页设计和响应式网页设计的区别


 

其实自适应网页设计和响应式网页设计,归根到底都是从网站建设实际出发,为了解决网页在不同尺寸和分辨率的终端设备无法正常显示的问题而发展来的,想明白这个事就好理解了。

1、自适应网页设计和响应式网页设计的由来

因为早期PC显示器的分辨率种类不多,所以网站都习惯性会被设计成固定宽度的页面,例如900px,1080px,1200px。後来随着显示器尺寸越来越丰富,特别是笔记本电脑的普及,这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小,在小屏显示器上网页又出现滚动条导致用户体验极其的差。为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题,前前後後也出现了好多种方案。总结来说就是下面三种:

提供不同版本:为不同的终端设备提供不同版本的网页。PC、Mobile、Pad提供三个不同的版本(其实就是三个相对独立的网站,虽然後期实现了一库多站)。但这样做虽然保证了展示效果,也造成了维护好几个版本的麻烦,而且网站有多个入口,会大大增加系统架构的复杂度。

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

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

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

下面有两个网址,你用浏览器随意的调节窗口的尺寸就可以很直观的感受到两种展示效果的差异:

自适应网站(网页内容和布局完全一样):http://m.ctrip.com/html5/

响应式布局(网页内容和布局随着屏幕尺寸变化而变化):https://www.microsoft.com/zh-cn/

从http://m.ctrip.com/html5/这个网页以看出采用自适应布局的话,不管设备屏幕尺寸如何变化,打开同一个页面看到的内容和布局基本上是一样的,不同的只是内容的尺寸。

这个网站https://www.microsoft.com/zh-cn/ 你可以看到它是可以自动识别屏幕尺寸并做出相应调整的网页设计,页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。

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


 

自适应网页设计和响应式网页设计的区别


 

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

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

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

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

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

郑州网站建设公司伟之琦网页设计公司,为您提供响应式网页设计,网站优化推广等一站式服务,我们会根据您的需求,量身打造您的专属行销型网站!上面介绍的网页设计步骤我们全程有专人进行悉心指导,所有环节均有完善的质量管理制度控制,充分保障您的网页设计质量。在香港找网页设计公司,就选郑州网页设计

 

原创声明:本站文章未经许可请勿擅自转载,如需转载请注明出处<郑州网络公司>

案例展示