三个步骤实现响应式web..ppt

什么情况下适宜采用响应式Web设计方式 你心里没谱 设计开发一个全新的移动版本站点或是客户端应用，整个过程是有很大挑战性的。除非产品正式上线，否则你无法真正了解它是否会成功。与其单纯地为了移动化而花费资源打造移动版本站点或是开发客户端应用，不如先花些心思将原本的网站打造得更具弹性，使其在各种主流移动设备中都拥有尽量优秀的用户体验。 要打造响应式站点，自然离不开有经验的交互、视觉设计及前端开发人员。所需的资源，尤其是时间方面，比起普通网站来说大约增加20%到30%的样子;但比起单独打造移动版本的网站，或是设计开发客户端应用的成本来说，却要低很多。从维护的角度来说，也会轻松很多。 你想节约成本 你希望网站可以兼容未来的新设备 三个步骤实现响应式web 基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备 Step1.Meta标签 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率，此处使用视图的meta标签来进行重置 meta name=viewport content=width=device-width, initial-scale=1.0 IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。 !--[if lt IE 9] script src=/svn/trunk/css3-mediaqueries.js/script ![endif]-- Step 2. HTML结构 view css Step 3. 媒介查询-Media Queries CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。 view demo 将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。 媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。 * * 为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示 对于小于等于480像素(手机屏幕)的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。 响应式Web 组员：孙慧 张瑞 刘健 谭旭龙 1.响应式Web的设计理念2.响应式Web是怎样进行 3.什么情况下适宜采用响应式Web设计方式 4.三个步骤实现响应式web 响应式Web的设计理念 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头? 在Web设计和开发领域，我们很快就会发现，要跟上新产品出现的速度，是很难做到的。对于很多站点来说，根本不可能为每一个有着新分辨率的新产品设计一个移动端版本。那么，我们真的是鱼和熊掌不可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗？或者还有新的方法？ 响应式Web的理念 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 -----摘自Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”（有求必应网页设计） 显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。 响应式Web是怎样进行 响应式Web怎样进行？ 弹性图片 响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问 题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-wid