响应式和自适应

很多人容易把【响应式设计】和【自适应】混为一谈,认为都是适配不同的终端,然而他们两个是有本质的区别。
响应式设计的目标对象是PC端和Mobile端web页面,设计师出一张图,告诉开发人员,在PC上要显示哪些内容,在Mobile上要显示哪些内容,只需要一个url,一套代码即可。
自适应的目标对象是Mobile端web页面,设计师出一张图,开发人员写一套代码,来适配不同手机不同浏览器。
他们的根本区别在于显示内容,响应式设计会根据设备来显示不同的内容,而自适应会显示相同的内容,不管设备是什么。
综上,你的网站是怎么设计的?是做成一套响应式代码?还是PC端做一套,Mobile端做一套,互不干涉?这要根据业务场景需要来决定。

时间: 2024-08-02 18:59:51

响应式和自适应的相关文章

响应式和自适应的区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念.先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880.比如 开源中国的网页就是固定宽度为998

响应式与自适应设计

两者的区别? 首先,响应式和自适应最为关键的区别是什么呢? 简而言之,响应式(百分比)就相当于液体,它可以自动适应不同尺寸的屏幕,无论你的设备尺寸多么奇葩.响应式使用CSS media queries的方法,根据目标设备自动改变风格如显示类型,宽度.高度等,这能很好解决不同屏幕尺寸的显示问题. 而自适应设计是基于断点使用静态布局,一旦页面被加载就无法再进行自动适应,自适应会自动检测屏幕的大小来加载适当的工作布局,也就是说,当你要采用自适应设计网站时,你得一个一个设计6种常见的屏幕布局. 1.32

响应式、自适应式

一点点补充 响应式布局与自适应布局的区别: 1.自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端.平板.手机,从而请求服务层,返回不同的页面:响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容. 2.自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了. 1.灵活性不同: 静态布局:毫无灵活性可言,目前已逐渐被淘汰. 自适应布局:静态布局的升级版,因其强大的灵活性,已逐渐成为高端网页的代名词. 流式布局:灵活性更高,可适用于其他三种网

web前端-移动端响应式与自适应

一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 简单分析一下这一行代码的含义:width=device

web前端响应式布局,自适应全部分辨率

写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单了解过,没真正实践啊.bootstrap比我想象的要好用的多.关键是.关键来了-- app端是仅仅有手机的,pc基本上木有.那就是说仅仅能依照手机端开发,那么boostrap响应式布局就不适用于app了(反正我是做了一套半成品,被推翻了).不能愉快的工作了.好不淡定的时间. .百度.百又问问同事.发

响应式和自适应(Responsive design 和 Adaptive design)

前二天做了几个手机端页面,本来用CSS3的@media 但因为对它还不是很了解,调试多次不成功.因为时间比较赶,为了实现最终的页面效果,我用JS去获取了屏幕的大小去控制了最终的字体大小. 做完后闲下来我查了一下资料,更加深入的去了解了一下何为响应式.发现原来我最终的页面,只能叫自适应,而不叫响应式.对于页面来说 没有实际上显示的问题(经过查资料显示貌似自适应比响应式更完善)不过我的初衷还是做响应式,在做响应式遇到问题时临时做的自适应. 响应式的基本概念是: 简而言之,就是一个网站能够兼容多个终端

picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到了这个东西 ,它能在浏览器不支持的时候提供一些替代的方式 ,对于响应式图片,有名的picturefill库能实现兼容性强的‘响应式’图片,对于不支持picture的浏览器,它会用js获取srcset后面的设置,然后决定输出什么样的图片 使用方法 引入js文件(可从cdnjs.com下载) <script

bootstrap 响应式图片自适应图片大小

<img src="..." class="img-responsive center-block" > 或者 $(window).load(function(){       $(".panel-body img").addClass("img-responsive center-block");   }) 我的应用 <img id="logo" src="../../asse

静态、自适应、流式、响应式四种网页布局有什么区别?

响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度. 不同点是响应式的模板 在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式. 而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式. 流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载. 静态的就是采用固定宽度的了.