3个步骤实现响应式web.pptVIP

响应式Web;1.响应式Web的设计理念2.响应式Web是怎样进行;响应式Web的设计理念;眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?;在Web设计和开发领域，我们很快就会发现，要跟上新产品出现的速度，是很难做到的。对于很多站点来说，根本不可能为每一个有着新分辨率的新产品设计一个移动端版本。那么，我们真的是鱼和熊掌不可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗？或者还有新的方法？;响应式Web的理念;-----摘自Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”（有求必应网页设计）;显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。;响应式Web是怎样进行;响应式Web怎样进行？;由Filament Group提出的响应式图片技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先;这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径/rwd-router。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的响应式图片，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。 这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载 ;当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表，或者更有效的，使用CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。 我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrapper、#content、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。 我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例： ;下面的代码可以放在默认主样式表style.css中： /*?Default?styles?that?will?carry?to?the?child?style?sheet?*/ ? html,body{ ? background... ? font... ? color... ? } ? h1,h2,h3{} ? p,?blockquote,?pre,?code,?ol,?ul{} ? /*?Structural?elements?*/ ? #wrapper{ ? width:?80%; ? margin:?0?auto; ? background:?#fff; ? padding:?20px; ? } ? #content{ ? width:?54%; ? float:?left; ? margin-right:?3%; ? } ? #sidebar-left{ ? width:?20%; ? float:?left; ? margin-right:?3%; ? }?#sidebar-right{ ? width:?20%; ? float:?left; ? }? ;下面的代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写： #wrapper{ ? width:?90%; ? } ? #content{ ? width:?100%;