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

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