什么是响应式Web设计？怎样进行？.pdfVIP

什么是响应式Web设计 ？怎样进行 ？ 开始第一篇。老规矩 ，先无聊的谈论天气一 的话题。十一长假 ，天气也终于开始有些秋天的味道 ，坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joo mla文档翻译的 ；长假好 时光 ，总会可以抽出一两天 ，安静的窝在家里做做博客、学做些新东西 ，简直没有比这更舒心的 事情。 说正事儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题 ，包括概念、实践 方式、案例及观点讨论等方面。相比于从前做的文档译文 ，这些文章篇幅要长的多(甚至要加分页了 ！…) ，今天放上的这篇几乎花掉了两天的“闲暇时间” ；对耐力是个考验 ，努力提高喽。废话 结束 ，here we go . 眼下 ，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐 ，就是 为iPho ne、iPad、黑莓、Kindle…各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5 年内我们还需要为多少新发明的设备设计开发不同版本的页面 ？这种疯狂什么时候算个头 ？ 在Web设计和开发领域 ，很快的 ，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说 ，为每种新设备及分辨率创建其独立的版本根本就是不切实际的 ；结果就是 ，我们将会赢得使用某 些设备的用户群 ，而失去那些使用其他设备的用户。不过 ，或许会有另外一种方式 ，可以帮助我们 避免这种情况的发生。 响应式Web设计(Respo nsive Web design)的理念是 ，页面的设计与开发应当根据用户行为以及设备 环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成 ， 包括弹性网格和布局、图片、C media query的使用等。无论用户正在使用笔记本还是iPad ，我 们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等 ，以适应不同设备 ；换句话说 ， 页面应该有能力去自动响应用户的设备环境。这样 ，我们就可以不必为不断到来的新设备做专门的 版本设计和开发了。 响应式Web设计的概念 Et han Marcot t e曾经在A List A part 发表过一篇文章“Respo nsive Web Design” ，文中援引了响应式 建筑设计的概念 ： 最近出现了一门新兴的学科——“响应式建筑(respo nsive archit ect ure)”——提出 ，物理空间 应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的 应用 ，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体 结构 ；还可以使用运动传感器配合气候控制系统 ，调整室内的温度及环境光。已经有公司在 生产“智能玻璃” ：当室内人数达到一定的阀值时 ，这种玻璃可以自动变为不透明 ，确保隐私 。 将这个思路延伸到Web设计的领域 ，我们就得到了一个全新的概念。为什么一定要为每个用户群各 自打造一套设计和开发方案 ？和响应式建筑相似 ，Web设计同样应该做到根据不同设备环境自动响 应及调整。 显然 ，我们无法也无需使用运动传感器或是机器人技术 ，响应式Web设计更多需要的是抽象思维。 好在 ，一些相关的概念已经得到了实践 ，比如液态布局、帮助页面重新格式化的media queries和脚 本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等 ，它更像是一 种对于设计的全新思维模式。 调整分辨率 不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式 ，不断被研发着的各种新设备也将带 来新的屏幕尺寸规格。有些设备基于横屏(po rt rait ) ，有些是竖屏(landscape) ，甚至还有正方形 ；对 于日益流行的iPho ne、iPad及其他一些智能手机、平板电脑 ，用户还可以通过转动设备来任意切换 屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况 ？ 要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向) ，我们就必须考虑N种屏幕 尺寸规格。诚然 ，我们可以将这些规格划分为几个大 ，然后为每一 做一种方案 ，确保该方案至 少在本组中尽量具有弹性。但即使这样 ，结果也将是无比焦虑的 ，谁知道某 设备在5年之后的占 有率是多少 ？而且很多用户甚至不去将浏览器的窗口最大化 ； 似这样的变数 ，我们还要考虑多 少呢 ？ Mo rt en Hjerde和他的同事们对2005至2008年市场中的4 00余种移动设备进行了统计