三个步骤实现响应式web

《三个步骤实现响应式web》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、响应式Web组员：孙慧张瑞刘健谭旭龙1.响应式Web的设计理念2.响应式Web是怎样进行3.什么情况下适宜采用响应式Web设计方式4.三个步骤实现响应式web响应式Web的设计理念眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?在Web设计和开发领域，我们很快就会发现，要跟上新产品出

2、现的速度，是很难做到的。对于很多站点来说，根本不可能为每一个有着新分辨率的新产品设计一个移动端版本。那么，我们真的是鱼和熊掌不可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗？或者还有新的方法？响应式Web的理念页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本

3、功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。-----摘自EthanMarcotte曾经在AListApart发表过一篇文章“ResponsiveWebDesign”（有求必应网页设计）显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的mediaqueries和脚本等。但是响应式Web设计不仅仅是关于

4、屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。响应式Web是怎样进行响应式Web怎样进行？弹性图片响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由RichardRutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在EthanMarcotte的液态图片一文中也有提到。img{max-width:100%;}只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面

5、上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。实际上，就像JasonGrigsby在他的CSSMediaQueryforMobileisFool'sGold一文中提到的，"液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设

6、置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。"一种简而美的方法。图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。由FilamentGroup提出的"响应式图片"技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先响应式图片这个技术的实现

7、需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考ResponsiveImages的说明文档。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的

8、是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表，或者更有效的，