《移动优先与响应式Web设计》一第1章 响应式网页

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

第1章 响应式网页

移动优先与响应式Web设计
“有一样东西，它大概是不喜欢墙……”

——罗伯特·弗洛斯特《修墙》

在开始写这本书时，我就能意识到无法确保你会拿着这本小小的书，阅读印刷版。你或许会在台式计算机屏幕阅读电子版；或许会在坐车上班时，在手机上翻页；或在平板电脑上滑动页面；或许根本不会阅读这段文字，而是由计算机为你朗读此书。

总之，我并不了解你，不知道你如何阅读这本书，根本没可能知道。

出版业终于承袭了网页的一大特色——灵活性。图书设计师和出版人克雷格·莫特认为出版业正迅速进入“后人工”时代——数码时代正在重新定义“图书”。

当然，网页设计师一直都要顾及这个问题。事实上，网页设计这个行业从来不是“人工物品”。到头来，网页设计师都不会造出东西。没有有形的对象，不能拿着，不能珍藏，不能传给下一代。纵使作品多么五光十色，网页设计师用的词汇都离不开“报头”、“留白”、“行间距”，甚至颇为荒谬的“折叠”（fold）。这些词汇都是来自印刷设计的，只不过是取出翻新，重用于崭新的数字媒介。

对于其中一些词汇，重用是理所当然的。事实上，人类都会习惯过去。每当我们搬到一个城市，或者换了一份新的工作，我们都会对应以前的经验，应用至新的、外来的事物，以逐渐适应。由于网页是新兴媒介，很自然地，设计师会借用既有用词。平面设计历史悠久，不下数百年，它为网页设计师提供了一套语言，若我们不用以构建自己的行业，那就未免太过大意了。

网页界取自印刷界的还不止于此。事实上，即使不以为意，我们还借用了另一个概念——画布（见图1.1）。

对于任何创意媒介，艺术家在进行创作时，首先都会选择画布。画家会选用纸张或布料，雕塑家会选用矿石。不论媒介如何，选择画布都是非常关键的，并且充满创意。未画第一笔，未凿第一刀，画布早已为作品赋予了维度与形状，宽与高，为作品定下了界限。

网页设计也尝试模仿这个步骤，就连叫法也一样：在图像编辑软件上设定画布——空白文件的宽与高，维度与形状。以上方法有个问题，那就是我们面对的根本不是真正的画布，而是浏览器窗口，它们各不相同，各有瑕疵（见图1.2）。请面对现实。一经网上发布，所有设计都将受用户支配，由用户来设定字体、屏幕颜色、窗口的形状和大小。

为了解决上述问题的不确定性和多样性，设计师会设下限制：以像素设定字形，或使用定宽界面，指定屏幕像素下限。设下如此限制有点像选择画布——让自己了解作品设定，以不变应对网络的万变。

然而，最好（有时候最坏）的是，网页能违反简单定义（感到气愤时，我真的想豁出去，不去理会种种限制）。网页设计师所定的限制也不外如是，很容易就会被违反。若浏览器窄于预期下限（见图1.3），水平滚动条和被掩盖的内容就会改变用户体验。除此之外，业务和客户亦会受影响（见图1.4）。受最低屏幕分辨率的限制，重要的链接或组件会变得脆弱，用户设定的视域会裁去这些组件，而不受我们的控制。

图1.4 影响业务和客户体验的细节（什么是“Reg”？其实是“Register Now”链接，可是被遮盖了）