精华内容
下载资源
问答
  • 响应式和自适应区别

    万次阅读 2016-01-24 16:54:04
    先给大家体验一下响应式和自适应区别,请放大缩小一下屏幕尝试  自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/  整理了几篇自适应和响应式的文章,摘抄并修改了一下,请...
    先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 
    
    自适应的体验http://m.ctrip.com/html5/  

    响应式的体验 http://segmentfault.com/ 

    整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 

    起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880。比如  开源中国 的网页就是固定宽度为998来定制的。至于为什么是  998 ,请  @红薯   

    后来随着显示器越来越多,以及笔记本的普及,这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局,大多指的就是宽度自适应布局。 

    在这种布局下,出现了两派: 

    百分比宽度布局

    流式布局

    题主说的是第一派,宽度使用百分比,文字使用 em,现在也很多开始使用rem了,也就是所谓的高清方案。第二派的布局以 iGoogle 为代表(已经停止)。 


    一开始没有响应式布局这个词语,但是慢慢出现了一个词——渐进增强,新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前,没人管自己的手机叫 2G,所以,3G 和 2G 两个词是一起出现的(技术上当然2G技术先出现)。同理,渐进增强出现后,另一个词「优雅降级」也随之出现了。 


    词的意思可以自己看 wiki、Google,我只在这儿举一个例子,gmail 和 qqmail。 


    他俩的宽度都是 100%,都是自适应。但是: 


    qqmail 就是 css hack 的完美体现,你用任何一个浏览器,几乎可以看到同一个样子的邮箱,腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面,为的是统一的用户体验。 


    而 gmail 使用了渐进增强,你的浏览器越强,你看到的效果就越好,用户体验就越好。 


    再后来,就是大家都熟知的 Google 发布了 android,于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。 

    手机虽然屏幕变小了,但是却提供了更丰富的功能。还记得以前用诺基亚上 QQ 的事儿吗?我们访问的是 3g.qq.com,当时我使用的是中兴的手机,访问 wap.qq.com,在后来的智能手机都是访问 m.qq.com。 


    不禁有人问「真的需要为每个手机分别设计一个网页吗?」、「真的需要为手机和电脑设计不同的网页吗?」,解决方法当然有很多种,可以看看 css zen garden(《Css秘密花园》还是很不错的一本书,也附带有网址http://www.csszengarden.com/,值得一看), 相信做过前端的都看过这个网站,一个神奇的网站。 


    最终的解决方案胜出者是响应式布局。 


    响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。 

    下面再从直观一点的来看,响应式和自适应的区别:

    首先两种方式解决问题的是不一样的。

    自适应是为了解决如何才能在不同大小的设备上呈现同样的网页


    手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

    很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

    于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小

    但是无论怎样,他们主体的内容和布局是没有变的。

    响应式的概念应该覆盖了自适应,而且涵盖的内容更多。

    自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动如果下面的网址,屏幕宽度大于1300像素,则6张图片并排在一行。

    如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

    如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。


    如果屏幕宽度在400像素以下,则6张图片分成三行。

    mediaqueri.es上面有更多这样的例子。

    说了一大堆,其实大家可能更多的是关心如何去实现。下面来聊一聊实现方式:

    1.允许网页宽度自动调整

    "自适应网页设计"到底是怎么做到的?其实并不难。

    首先,在网页代码的头部,加入一行viewport元标签

    1. <meta name="viewport" content="width=device-width, initial-scale=1" />  

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

    1. <!--[if lt IE 9]>  
    2.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
    3.   <![endif]-->  

    2、尽量少使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

    1. width:xxx px;  

    通过指定百分比宽度来替代:同时还可以配合css的cal,进行计算宽度

    1. width: xx%;  

    或者
    1. width:auto;  

    3、相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)或者高清方案(rem),rem不局限于字体大小,前面的宽度width也可以使用,代替百分比。

    1. body {  
    2.     font: normal 100% Helvetica, Arial, sans-serif;  
    3.   }  

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。
    1. h1 {  
    2.     font-size: 1.5em;   
    3.   }  

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

    1. small {  
    2.   font-size: 0.875em;  
    3. }  

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    4、流动布局(fluid grid)

    "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。更多内容请查看流动布局的文章。

    1. .main {  
    2.     float: right;  
    3.     width: 70%;   
    4.   }  
    5.   
    6.   .leftBar {  
    7.     float: left;  
    8.     width: 25%;  
    9.   }  

    float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    另外,绝对定位(position: absolute)的使用,也要非常小心。

    5、选择加载CSS

    "自适应网页设计"的核心,就是CSS3引入的Media Query模块。

    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

    1. <link rel="stylesheet" type="text/css"  
    2.     media="screen and (max-device-width: 400px)"  
    3.     href="tinyScreen.css" />  

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

    1. <link rel="stylesheet" type="text/css"  
    2.     media="screen and (min-width: 400px) and (max-device-width: 600px)"  
    3.     href="smallScreen.css" />  

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    1. @import  url("tinyScreen.css") screen and (max-device-width: 400px);  

    6、CSS的@media规则

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    1. @media  screen and (max-device-width: 400px) {  
    2.   
    3.     .column {  
    4.       float: none;  
    5.       width:auto;  
    6.     }  
    7.   
    8.     #sidebar {  
    9.       display:none;  
    10.     }  
    11.   
    12.   }  

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    7、图片的自适应(fluid image)

    除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放

    这只要一行CSS代码:

    1. img { max-width: 100%;}  

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
    1. img, object { max-width: 100%;}  

    老版本的IE不支持max-width,所以只好写成:
    1. img { width: 100%; }  

    此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的 专有命令

    1. img { -ms-interpolation-mode: bicubic; }  

    或者,Ethan Marcotte的 imgSizer.js

    1. addLoadEvent(function() {  
    2.   
    3.     var imgs = document.getElementById("content").getElementsByTagName("img");  
    4.   
    5.     imgSizer.collate(imgs);  
    6.   
    7.   });  

    不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有 很多方法可以做到这一条,服务器端和客户端都可以实现。

    原文地址:

    http://my.oschina.net/liu-xuewei/blog/345580
    展开全文
  • 在网上经常看到一些博客写到响应式和自适应区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便...

    在网上经常看到一些博客写到响应式和自适应的区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便分享给大家。

    1、自适应:

    通常我们使用弹性盒子、百分比的时候,都属于自适应布局。这里简单附上一个例子。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>自适应</title>
    	<style>
    		.box {
    			width: 100%;
    			height: 100px;
    			display: flex;
    		}
    
    		.div1, .div2 {
    			width: 50%;
    			height: 100px;
    		}
    
    		.div1 {
    			background: red;
    		}
    
    		.div2 {
    			background: blue;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    </body>
    </html>

    如该例子,只是使用了flex弹性布局和百分比的尺寸,这种布局如果在浏览器窗口或者其它设备的视口宽度较小的情况下,里面的内容会被挤的很小,某些情况下还会导致无法看清。在我个人的理解里,这种布局方式就是自适应布局。

     

    2、响应式:

    响应式也是在自适应的基础上构建的,只是响应式比自适应多了媒体查询(media queries),媒体查询可检测viewport宽度和高度、设备的宽度和高度、设备是否横屏以及分辨率。当知道这些信息的时候,其实就可以显示不同的css样式。bootstrap的实现原理其实也是根据媒体查询。这里也附上一个例子:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>响应式</title>
    	<style>
    		.box {
    			width: 100%;
    			height: 100px;
    			display: flex;
    		}
    
    		.div1, .div2 {
    			width: 50%;
    			height: 100px;
    		}
    
    		.div1 {
    			background: red;
    		}
    
    		.div2 {
    			background: blue;
    		}
    
    		/*响应式代码*/
    		@media screen and (max-width: 500px) {
    			.box {
    				width: 100%;
    				height: 100px;
    				display: block;
    			}
    
    			.div1, .div2 {
    				width: 100%;
    				height: 100px;
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    </body>
    </html>

    当窗口大于500px时,显示的样式:

    当窗口小于等于500px时,显示的样式:

    相信大家都懂得这些技术,而这篇文章的目的也不是说去讲解自适应与响应式的技术方法,而仅仅是区分什么是响应式布局、什么是自适应布局。但这也仅代表个人看法,如有说的不对的地方欢迎指出。

    展开全文
  • 响应式和自适应区别

    千次阅读 2019-04-13 09:28:06
    自适应:百分比布局,宽度使用百分比,文字使用em,现在也很多使用rem了,也就是... 响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局 ...

    自适应:百分比布局,宽度使用百分比,文字使用em,现在也很多使用rem了,也就是所谓的高清方案;

    响应式:据屏幕的大小自动的调整页面的展现方式,以及布局;

    区别:

    两种方式的解决问题是不一样的;

    • 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页;
    • 响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局

     

    展开全文
  • 本篇文章主要介绍了HTML5响应式自适应)网页设计的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 响应式和自适应有什么区别?

    千次阅读 2019-09-18 11:28:21
    这并不是第一次接触到自适应布局和响应式布局等名词,但是没有仔细研究,概念也不是很清晰,对于他们的了解一直是一个懵懂的状态,借此机会自己查阅了很多资料,研究了一下他们的区别、优缺点、来巩固自己头脑中的...

    何为自适应设计?何为响应式设计? 关于自适应设计和响应式设计,设计师的最佳选择是什么?

    最近接到的几个页面需求后台都做了自适应布局,这并不是第一次接触到自适应布局和响应式布局等名词,但是没有仔细研究,概念也不是很清晰,对于他们的了解一直是一个懵懂的状态,借此机会自己查阅了很多资料,研究了一下他们的区别、优缺点、来巩固自己头脑中的概念,增加知识积累,也方便日后查阅。(此总结只关注两种布局的优缺点、适用的产品,暂不讨论实现具体方式。)

    先科普一个下文频繁用到的概念,视口:用户浏览信息屏幕尺寸大小(每一个视口后面都是真实一位的用户)

    先说共同点,两者都是优化适应互联网中越来越分化的视口浏览体验,用技术来使页面适应不同分辨率的视口的设计。

    响应式设计(Responsive design):

    响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。(下午左,一版设计适应所有终端)

    自适应设计(Adaptive Design

    自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。(下图右,三款设计稿适应三类终端)
    在这里插入图片描述

    区别:

    响应式设计实现原理(Responsive design)

    是为不同类别得物理设备建立相同的网页(pc、平板、手机、手表等),检测到设备分辨率大小后调用相应的网页。(技术成本最高)

    自适应设计实现原理(Adaptive design )

    是为同类别的物理设备建立三种不同的网页(PC),检测到设备分辨率大小后调用相应的网页。(可以只适应pc不同分辨率,比如设置四档位宽度990、1200、1500、1710技术成本较低)

    实例:
    app横行的当下,目前国内自适应布局应用主要集中在视口已经很稳定的web端,(web端视口大数据[2016])针对笔记本,台式机进行优化体验。

    响应式与自适应设计的各自特点:

    响应式布局一个设计稿支持当下不同终端主流视口的信息适配展示,(但是为了开发效率和一定的可控行依然会针对当下主流不同物理终端优化出一个最大值视口PC(web端)→ 智能手表(小屏设备)

    以下通过拖拉浏览器窗口大小来体验

    实例:http://www.apple.com/cn (apple中国)

    实例:http://36kr.com/ (36氪)

    响应式网站标志:

    1. 同时适配web+手机/智能手表
    2. 标签导航在视口接近最大手持终端设备视口时改变为经典的抽屉式导航
    3. 网站框架布局会根据视口来调整位置

    在这里插入图片描述优点:

    面对不同分辨率设备灵活性强

    能够快捷解决多设备显示适应问题

    缺点:

    仅适用布局、信息、框架并不复杂的部门类型网站

    兼容各种设备工作量大,效率低下

    代码累赘,会出现隐藏无用的元素,加载时间加长

    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

    一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    在实际应用上,可以说自适应布局设计是响应式的穷兄弟,当下仍以单个终端(例如web端)为主,也是现在web端最成熟,应用最多的适配视口的解决方案。

    实例:https://www.tmall.com(天猫商城) 自适应980 1230二档视口

    实例:http://www.le.com(乐视) 自适应980 1180 1380 四档视口

    实例:http://www.iqiyi.com/ (爱奇艺) 自适应980 1180 1380 1920 四档视口

    实例:http://sports.163.com(网易体育) 自适应960 1200二档视口

    自适应网站标志

    1. 大多只是适配单个终端的主流N个主流视口(2-3个)

    2. 当视口大小低于设置的最小视口时,界面会出现显示不全,溢出,并出现横向滑动指示器

    3. 总体框架不变,横线布局的板块大多会有所减少

    在这里插入图片描述优点:

    对网站的复杂程度兼容性更大

    实施起来代价更低,

    代码更高效

    测试更容易,运营相对更精准(图片可控性更高)

    缺点:

    在移动端设计大行其道之下,同一个网站,往往需要为不同的设备开发不同的页面,增加开发成本

    其实这是复杂类型网站设计的一种最优方案,虽然增加了开发运营成本,但是换回了更精准的运营、框架扩展度更高,用户加载更迅速,是极其划算的一件事情,这也是自适应设计成为当下主流网站采用的布局方式的重要原因之一

    它们应该如何服务于我们的设计呢?

    理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

    自适应布局可以让你的设计更加可控,因为你只需要考虑几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的,这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题,你很难有绝对的把握预测到它会怎样。换个角度说,这也是响应式布局的魅力所在。相比较来说自适应布局有它自己的优势,因为它们实施起来代价更低,测试更容易,这往往让他们成为更切实际的解决方案。

    其实,无论是哪种设计理念都是各有优缺点,具体的选择还是要从团队/项目实际需求出发去选择。

    展开全文
  • 自适应:百分比布局,宽度使用百分比,文字使用em,现在也...响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局 —————————————...
  • 自适应和响应式的介绍和区别

    万次阅读 2018-06-13 10:17:57
    [百科]:响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 自适应设计...
  • 使用附加值:在下面的示例中,我们使用逗号向我们现有的媒体查询添加其他媒体查询(这将像OR运算符一样):例如当宽度介于600px900px之间或高于1100px时 - 改变外观 @media screen and (max-width: 900px) ...
  • jQuery响应式自适应代码案例,电脑端、平板端、手机端
  • 响应式布局与自适应布局的区别
  • 先给大家体验一下响应式和自适应区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏:...
  • 响应式布局能使网站在手机平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 自适应布局:就是能为了使网页自适应的显示在不同大小终端设备上的新网页...
  • 1.什么是响应式布局和自适应布局 响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个...
  • 是基于bootstrap+jQuery+Spring+Spring MVC来进行开发。 没有对接数据库,但是已经写好DAO层接口,只需要在接口中实现既可。...由于是自适应和响应式。在手机端的验证码还没有实现,只实现了PC端。
  • 响应式和自适应布局的区别

    千次阅读 2018-05-01 23:08:41
    自适应:自己根据屏幕宽度的改变而改变...在不同的设备、分辨率下展示不同的页面效果)下面再从直观一点的来看,响应式和自适应区别: 首先两种方式解决问题的是不一样的。 自适应是为了解决如何才能在不同大小的...
  • 预览地址:http://www.dede58.com/a/dedecode/12684.html ;
  • 响应式布局能使网站在手机平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 响应式布局概念 Responsive design,意在实现不同屏幕分辨率的终端上浏览...
  • html5响应式图片布局自适应浏览器大小图片布局
  • 响应式布局和自适应布局详解

    千次阅读 2019-06-26 17:02:24
    响应式布局等于流动...它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知...
  • 为什么响应式自适应)网站是一个坑

    万次阅读 热门讨论 2018-02-26 15:57:08
    其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备...
  • 浅谈响应式开发与自适应布局!

    千次阅读 2018-05-02 23:41:49
    谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月9日凌晨2...
  • youlie自适应网站与响应式网站的区别在哪?两者之间有什么区别吗?对于自适应网站与响应式网站的区别,我想很多人都会有所误解,以为两者是是一样的。其实不是,从网站建设的角度来讲自适应网站...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,729
精华内容 12,291
关键字:

响应式和自适应的区别