《三个步骤实现响应式web.ppt》由会员分享，可在线阅读，更多相关《三个步骤实现响应式web.ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、响应式Web组员组员：孙孙慧慧 张张瑞瑞 刘健刘健 谭谭旭旭龙龙1.响响应应式式Web的的设计设计理念理念2.响响应应式式Web是怎是怎样进样进行行3.什么情况下适宜采用响什么情况下适宜采用响应应式式Web设计设计方式方式4.三个步三个步骤实现骤实现响响应应式式web响响应应式式Web的的设计设计理念理念眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle各自打造一款页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?在在Web设计和开发领域，我们很快
2、设计和开发领域，我们很快就会发现，要跟上新产品出现的速就会发现，要跟上新产品出现的速度，是很难做到的。对于很多站点度，是很难做到的。对于很多站点来说，根本不可能为每一个有着新来说，根本不可能为每一个有着新分辨率的新产品设计一个移动端版分辨率的新产品设计一个移动端版本。那么，我们真的是鱼和熊掌不本。那么，我们真的是鱼和熊掌不可兼得，必须舍弃用某种设备的用可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗户换来使用另外一种设备的用户吗？或者还有新的方法？或者还有新的方法？响应式Web的理念页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
3、具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。-摘自EthanMarcotte曾经在AListApart发表过一篇文章“ResponsiveWebDesign”（有求必应网页设计）显然，我们无法也无需使用运动传感器或是显然，我们无法也无需使用运动传感器或是机器人技术，响应式机器人技术，响应式Web设计更多需要的是设计更多需要的
4、是抽象思维。好在，一些相关的概念已经得到抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式了实践，比如液态布局、帮助页面重新格式化的化的media queries和脚本等。但是响应式和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于及自动缩放的图片等等，它更像是一种对于设计的全新思维模式设计的全新思维模式。响响应应式式Web是怎是怎样进样进行行响响应应式式Web怎怎样进样进行？行？弹性图片弹性图片 响响应应式式Web设计设计的思路中，一个重要的因素是怎的思路中，一个重要的因素是怎样处样处
5、理理图图片方面的片方面的问问 题题。有。有很多同比很多同比缩缩放放图图片的技片的技术术，其中有不少是，其中有不少是简单简单易行的。其中，由易行的。其中，由Richard Rutter最先最先尝试尝试的一种做法比的一种做法比较较流行，即使用流行，即使用CSS的的max-width属性。属性。这这个方法在个方法在Ethan Marcotte的液的液态图态图片一文中也有提到。片一文中也有提到。img max-width:100%;只要没有其他涉及到只要没有其他涉及到图图片片宽宽度的度的样样式代式代码码覆盖掉覆盖掉这这一行一行规则规则，页页面上所有的面上所有的图图片就会以其原始片就会以其原始宽宽度度进
6、进行加行加载载，除非其容器可，除非其容器可视视部分的部分的宽宽度小于度小于图图片的原始片的原始宽宽度。上面的代度。上面的代码码确保确保图图片最大的片最大的宽宽度不会超度不会超过浏览过浏览器窗口或是其容器可器窗口或是其容器可视视部分的部分的宽宽度，所以当窗口或容器的可度，所以当窗口或容器的可视视部分开始部分开始变变窄窄时时，图图片的最大片的最大宽宽度度值值也会相也会相应应的的减小，减小，图图片本身永片本身永远远不会容器不会容器边缘隐边缘隐藏和覆盖。藏和覆盖。实际实际上，就像上，就像Jason Grigsby在在他的他的CSS Media Query for Mobile is Fools Gol
7、d一文中提到的，一文中提到的，液液态图态图片背后片背后的思路，就是无的思路，就是无论论何何时时，都确保在其原始，都确保在其原始宽宽度范度范围围内，以最大的内，以最大的宽宽度同比完整的度同比完整的显显示示图图片。我片。我们们不必在不必在样样式表中式表中为图为图片片设设置置宽宽度和高度，只需要度和高度，只需要让样让样式表在窗口式表在窗口尺寸尺寸发发生生变变化化时辅时辅助助浏览浏览器器对图对图片片进进行行缩缩放。放。一种一种简简而美的方法。而美的方法。图图片本身的分辨率及加片本身的分辨率及加载时间载时间是另外一个需要考是另外一个需要考虑虑的的问题问题。虽虽然通然通过过上面的方法，上面的方法，可以很可
8、以很轻轻松的松的缩缩放放图图片，确保在移片，确保在移动设备动设备的窗口中可以被完整的窗口中可以被完整浏览浏览，但如果原始，但如果原始图图片本身片本身过过大，便会大，便会显显著降低著降低图图片文件的下片文件的下载载速度，速度，对对存存储储空空间间也会造成没有必也会造成没有必要的消耗。要的消耗。由由Filament Group提出的提出的响应式图片响应式图片技术思想，有助技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下小设备上降低图片自身的分辨率。可以看下demo页面先页面先响应式图片响应式图片
9、这个技术的实现需要使用几个相关文件，我们可以在这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个上获取。包括一个JavaScript文件文件(rwd-images.js)，一个，一个.htaccess文件，以及一些范例资源文文件，以及一些范例资源文件。具体使用方法可以参考件。具体使用方法可以参考Responsive Images的说明的说明文档。大致的原理是，文档。大致的原理是，rwd-images.js会检测当前设备的会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面屏幕分辨率，如果是大屏幕设备，则向页面head部分中部分中添加添加BASE标记，并将后续的图片、脚
10、本和样式表加载请标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径求定向到一个虚拟路径/rwd-router。当这些请求到达服。当这些请求到达服务器端，务器端，.htacces文件会决定这些请求所需要的是原始图文件会决定这些请求所需要的是原始图片还是小尺寸的片还是小尺寸的响应式图片响应式图片，并进行相应的反馈输出。，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。到。这项技术支持多数的现代浏览器，包括这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和和Opera，以及这些浏览器的移动设
11、备版本，以及这些浏览器的移动设备版本;在在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载到小图片的输出，但同时，原始大图也会被下载当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表，或者更有效的，使用CSSmediaquery。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrapper、#conte
12、nt、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：打造布局打造布局结构构下面的代码可以放在默认主样式表style.css中：/*Defaultstylesthatwillcarrytothechildstylesheet*/html,bodybackground.font.color.h1,h2,h3p,blockquote,pre,code,ol,ul/*Structuralel
13、ements*/#wrapperwidth:80%;margin:0auto;background:#fff;padding:20px;#contentwidth:54%;float:left;margin-right:3%;#sidebar-leftwidth:20%;float:left;margin-right:3%;#sidebar-rightwidth:20%;float:left;下面的代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写：#wrapperwidth:90%;#contentwidth:100%;#sidebar-leftwidth:100%;
14、clear:both;/*Additionalstylingforournewlayout*/border-top:1pxsolid#ccc;margin-top:20px;#sidebar-rightwidth:100%;clear:both;/*Additionalstylingforournewlayout*/border-top:1pxsolid#ccc;margin-top:20px;大致的视觉效果如下图所示：显示或隐藏内容显示或隐藏内容通过前文的学习，我们已经了解到，对于响应式通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结设计，同比例缩减元素
15、尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能简单的只从中的文字内容信息来说，则不能简单的只从同比同比缩小缩小和和调整布局结构调整布局结构这两方面去处理。对于手这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案易聚焦的内容、以信息列表代替传统的多行文案内容等。内容等。触屏与鼠标触屏与鼠标触屏设备已经成为主流。虽然目前多数触屏设备还是
16、小屏触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术设备也开始使用触屏技术;且不说且不说iPad一类的平板电脑，一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入，即使用传统的键鼠设备，同时也加入了触屏技术了触屏技术相比于传统的基于鼠标指针的互动，触屏技术显然带来了相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范截
17、然不同的交互方式与相应的设计规范;两者又有各自所两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映如，触屏设备无法反映CSS定义的定义的hover行为及相应的样行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是式，因为它没有鼠标指针的概念，手指点击就是click行为。行为。所以不要让任何功能依赖于对所以不要让任何功能依赖于对hover状态的触发。状态的触发。有兴趣的话，可以读读这篇有兴趣的话，可以读读这篇D
18、esigning for Touchscreen，这里提到的很多建议即有利于改进针对，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备左手负责握住设备;这样，放在右侧的导航列表即方便右这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。手的点击，又可以避免被握着设备的
19、左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。而这一点与键鼠设备用户的习惯完全不矛盾。什么情况下什么情况下适宜采用响适宜采用响应应式式Web设计设计方式方式你心里没谱你心里没谱设计开发一个全新的移动版本站点或是客户端应用，整个过程是有很大挑战性的。除非产品正式上线，否则你无法真正了解它是否会成功。与其单纯地为了移动化而花费资源打造移动版本站点或是开发客户端应用，不如先花些心思将原本的网站打造得更具弹性，使其在各种主流移动设备中都拥有尽量优秀的用户体验。要打造响应式站点，自然离不开有经验要打造响应式站点，自然离不开有经验的交互、视觉设计及前端开发人员。所的交互、视觉设计及前端开发人员
20、。所需的资源，尤其是时间方面，比起普通需的资源，尤其是时间方面，比起普通网站来说大约增加网站来说大约增加20%到到30%的样子的样子;但但比起单独打造移动版本的网站，或是设比起单独打造移动版本的网站，或是设计开发客户端应用的成本来说，却要低计开发客户端应用的成本来说，却要低很多。从维护的角度来说，也会轻松很很多。从维护的角度来说，也会轻松很多。多。你想节约成本你希望网站可以兼容未来的新设备三个步骤实现响应式web基于基于CSS3的媒介的媒介查询查询(Media Query)特性使得网特性使得网页页适适应应不同不同设备设备Step1.Meta标签大多数移动浏览器将HTML页面放大为宽的视图(vi
21、ewport)以符合屏幕分辨率，此处使用视图的meta标签来进行重置IE8或者更早的浏览器并不支持MediaQuery。你可以使用media-queries.js或者respond.js来为IE添加MediaQuery支持。Step2.HTML结构view css Step3.媒介查询-MediaQueriesCSS3MediaQuery-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。viewdemo将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。