《移动优先与响应式Web设计》一1.3 未来方向

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第1章，第1.3节，作者： 【美】Luke Wroblewski , Ethan Marcotte 译者： 司徒卓恆 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 未来方向

令我兴奋不已的是，建筑师在尝试克服自古以来的限制。然而，网页设计师正面对日新月异的设备和环境，故被迫要克服自设的限制（网页本应非常灵活）。

我们需要放开限制。

不同版本的网页，设计不应断续，不应只配合指定设备或浏览器，不同版本应当成同一体验的不同表面。换句话说，设计的网站不只要更灵活，还需配合使用媒介。

概括说来，我们需要“响应式网页设计”。网页本来就是灵活的，应好好加以利用，无需依赖设计师所需的限制。实现响应式设计，只需要在我们的作品中嵌入基于标准的技术，并稍微改变网页的设计哲学即可。

因素
到底创造响应式设计需要什么？只针对前台界面，设计需要3种核心因素。

• 灵活的网格界面。
• 灵活的图像和媒体。
• 媒体查询，CSS3设定中的组件。

接下来我们会逐项探讨灵活网格、灵活图像和媒体，以及CSS3媒体查询，创造更灵活、更好的响应方法来设计网页。在此期间，创作的设计能配合浏览器或设备的限制，响应用户需要。

不过，在这这前，看来我应事先声明：我也算是科幻小说迷，喜欢雷射枪、机器人、飞行车以及这类型的电影和电视节目。老实说，我不太在意这些电影和电视节目的质量。无论是由斯坦利·库布里克执导，还是小成本电影，我都会看。只要里面至少有一只火箭飞船，我就满意了。

看过那么多科幻故事，不论好坏，有一种东西，众多作似品乎都情有独钟，那就是秘密机器人。开始时，永远都是有一群探险家，志向坚定，决心要击败那些妖魔鬼怪。带队的都是那些可敬的英雄。船队某处会埋伏着秘密机器人。（播悬疑音乐。）这部机器人心狠手辣、凶狠邪恶、冷血无比、机关算尽。纵使看似人类，奸诈目标只有一个：从内部击倒这群英雄。

故事最紧张的情节就是发现秘密机器人。当然，观众知道谁是英雄，谁是机器人内奸。然而，观众会继续不断地思索：其他角色中，谁是机器人，谁不是机器人？

个人而言，从来都不明白为何如此难猜。我很挂念Johnny 5和C-3PO，因为一看就知道是机器人，它们都不会“披着合成皮肤掩饰自己”，如此荒谬。因此我着手解决这个问题。为了理清混淆因素，我设计了简短的网站，名为“Robot or Not”（见图1.7），用以协助认定究竟谁是机器人，谁不是机器人，协助辨别有血有肉的朋友和铁皮坏蛋。

好吧，或许我是唯一一个有此疑惑的人。

不论网站是否真的有用，这个实而不华的设计会用作例子以示范如何构建响应式网页。接下来的章节会带领大家一起，利用灵活网格、灵活图像和媒体、媒体查询，开发“Robot or Not”。

好了，或许你不喜欢紧张，更有可能你已经听腻了我的连篇废话，只想看到完成品。如果没错，请浏览http://responsivewebdesign.com/robot/ ，尽情尝试。

你还在这里？太好了。我们开始吧。