响应式网站与自适应网站比较

Adaptive website(自适应网站)            应对在浏览器的宽度变化不调整网页元素的位置,缩放网页元素,以适应在可用空间。

Responsive website (响应式网站)        应对在浏览器的宽度变化通过调整网页元素的位置,以适应在可用空间。

PS:真不知道为什么很多人都把自适应网站与响应式网站混为一谈。(自适应网站=响应式网站)

开发难度比较

自适应网站开发起来比较既复杂(不同屏幕的适配控制)又简单(独立于PC端),但是容易维护与调试(只有移动端的处理事件)。

响应式网站开发起来比较既简单(只需通过媒体查询来调整)又复杂(与PC端网页元素耦合度大),但是不容易调试与维护(绑定了移动端与手机端的处理事件)。

页面性能比较 

自适应网站只有移动端的布局与样式(内容少),下载到浏览器立刻显示,所以性能快。

响应式网站不仅有移动端的布局与样式,还有PC的布局与样式(内容多),下载到浏览器之后进行网页布局调整再显示,所以性能慢。

PS:响应式网站也有提高性能的方法,就是针对屏幕加载不同的媒体查询样式,选择性加载资源。但是性能依然不如自适应网站。

用户体验比较

响应式网站保证PC端与移动端的一致性,流式布局。

自适应网站保证移动端更友好的体验。

SEO比较

自适应网站不容易聚集网站权重,但可以通过重定向进行聚集权重。

响应式网站容易聚集网站权重,容易把移动端的权重与PC端的权重叠加,提高网站排名。

总结:推荐开发自适应网站,追求性能与用户体验。(大多数的互联网公司都是web PC端与移动端分离的)

         响应式真心维护起来比较头疼,bug比较多,不好处理。

时间: 2024-10-10 10:55:58

响应式网站与自适应网站比较的相关文章

经典网页设计:10个响应式设计的购物网站

今天我想与大家分享电子商务主题的网站设计,更精确地说是为设计在线商店提供新思想.每个人都知道移动技术的市场发展迅速,已经很难找到一个人没有手机的人了.响应设计给我们提供了一个巨大的机遇:站点的访问量的增长和销售收入的增加.在今天的收集中,分享10个响应式设计的国外购物网站给大家. 1. Snipcart 2. Bold & Noble 3. Greats Brand 4. Create and customize your own cube 5. The Gadget Flow 6. USM M

响应式设计与自适应设计

响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的.当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的事情. 下面我们来看看响应式设计与自适应设计两者用法: 响应式Web设计(Responsive Web Design) :主要利用CSS3的媒介查询(Media Query)和Viewport来解决问题.通过媒介查询的设置,根据屏幕宽度.屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的

响应式布局和自适应布局的不同

学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别.现在我来和大家说下它们的不同: 自适应的体验   http://m.ctrip.com/html5/响应式的体验   http://segmentfault.com/ 整理了自己查阅的知识点,给各位一些提示. 起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少,即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道...

响应式布局与自适应式布局有什么不同

很多人经常会对响应式布局和自适应式布局产生混淆,今天将为大家介绍这两者到底表示的是什么以及它们之间的区别.具有一定的参考作用,希望对大家有所帮助. 一:什么是响应式布局和自适应式布局 1.什么是响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式.通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验.换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本. 2.什么是自适应式布局: 自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新

plank触屏版自适应响应式html5手机wap网站模板下载

使用HTML5开发的页面更具有现代网页的特性:界面华丽.人机交互出色.功能强大,现在我们已经很难单纯用传统的表现方式满足用户多种多样的需求,实现时也很难将HTML5与之前的版本割裂开来,所以我们可以认为在移动网站平台上绝大部分的都将会采用HTML5开发.懒人模板免费提供高端手机网站模板,网页模板,企业网站模板,wap网站,响应式网站,html5+css3特效等资源下载,打造最专业的HTML5手机建站学习.交流.分享生态圈. 下载地址:http://www.lanrenmb.com/HTML5/1

expan触屏版自适应响应式html5手机wap网站模板下载

使用HTML5开发的页面更具有现代网页的特性:界面华丽.人机交互出色.功能强大,现在我们已经很难单纯用传统的表现方式满足用户多种多样的需求,实现时也很难将HTML5与之前的版本割裂开来,所以我们可以认为在移动网站平台上绝大部分的都将会采用HTML5开发.懒人模板免费提供高端手机网站模板,网页模板,企业网站模板,wap网站,响应式网站,html5+css3特效等资源下载,打造最专业的HTML5手机建站学习.交流.分享生态圈. 下载地址:http://www.lanrenmb.com/HTML5/1

关于响应式布局与手机网站

<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,minimum=1.0,maximum=1.0,initial-scale=1.0"> <title>

响应式布局和自适应布局

1.布局方式分类 1.1.固定布局 : 以px(像素)为单位. 缺点:① 页面死板,屏幕大小不一样,展示的效果不一样: ② 不适应响应性布局. 1.2.流式布局 : 以%(百分比)作为单位.百分比宽度 = 目标元素宽度 / 上下文元素宽度. 优点 : 可以自适应,根据不同的分辨率显示不同的宽度. 缺点 :行高.margin-top在大屏上显示的太高,在小屏上显示的太窄. 1.3.弹性布局 : 以em作为单位.百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸.目前浏览器默认文字大小是16px,使用

css 实现多张图片响应式水平排列自适应效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 9 .test{ 10 float: left; 11 width: 25%; 12 box-sizing: border-box; 13 padding: 10px; 14 min-width: 150px; 15 }