跳到主要内容

响应式网页设计

我的一位教授曾告诉我,每一次艺术运动都是对它之前的一次回应。 Bebop摆脱了旋律的旋律限制,而黑色电影则用坚韧不拔的反英雄来抵制大型工作室喜剧的光泽。乔治卢卡斯观看了一些太多的黑泽明电影和一堆旧西部片,而星球大战就是结果。

影响和继承:这是一首古老的歌曲。仍然年轻的网页设计领域也不例外,并且受其前身印刷品的影响很大。

然而,与打印不同的是,我们无法控制:浏览器不兼容,依赖本地安装的字体,不断变化的浏览器窗口:它足以让一个可怜的设计师疯狂。因此,面对每一个不一致的情况,我们对媒体施加限制,以更好地建立控制感。固定宽度布局和最小屏幕分辨率是两个这样的约束:它们更好地帮助我们将我们认为可以解决的问题与我们无法解决的问题隔离开来。划分,隔离和征服。

但网络变得越来越难以预测,而不是更少。有比以往更多的设备,更多的浏览器。优秀的小屏幕浏览器(如Mobile WebKit)的爆炸性采用进一步加剧了这种效果。

不幸的是,我们在桌面之外进行设计的早期尝试与过去的分离和隔离方法非常相似。这是一个简单的例子:当朋友通过电子邮件向我发送她刚刚在手机上阅读的文章的链接时,我正在使用笔记本电脑:http://webkit.dailykos.com/stories/2010/4/11/856114/-My-iPad-as-a-tool.html

请注意webkit子域:网站所有者已在单独的子域上隔离了“移动体验”,将宽度固定为320px。一旦该链接被共享(通过电子邮件,或保存到Delicious或Instapaper),读者就被锁定在该上下文中,无论浏览器如何。正如您可能猜到的,在桌面浏览器上阅读体验并不是最佳的(阅读:“糟糕”)。

碎片化的内容

你可能会争辩说这个例子只是执行不力,一些简单的浏览器嗅探可以很容易地将用户重定向到“完整”的文章。但我认为这是我们在桌面之外进行设计的一般方法的表现:面对许多不确定因素,我们对设计施加限制,例如最小屏幕分辨率,以便更好地隔离我们可以解决的问题和我们认为的问题不能。但是,在不同的“设备优化”域中分割我们的内容是一个失败的主张。我们无法与技术的步伐竞争,每次有新的,有能力的浏览器进入市场时更新我们的网站。

我们需要将它们视为具有相同体验的方面,而不是创建为特定设备或浏览器量身定制的断开连接的设计。响应式网页设计意味着创建一种自适应设计,该设计能够了解所查看的上下文并相应地优化其显示。我们可以通过在我们的工作中嵌入基于标准的技术来实现这一目标。通过灵活的网格(使用灵活的媒体),我们可以合并媒体查询来创建响应式设计。

为了说明这一点,我建立了一个名为“Robot or Not”的简单小(假)网站(见上文)。这是谁是和不是机器人的明确答案。你的猫?不是机器人。 K-9?完全是一个机器人。

Find our case study at robot-or-not.com

在robot-or-not.com上查找我们的案例研究

设计简单明了,覆盖在八柱网格上(见下文)。我们的第一个挑战是:我们如何在图形编辑器中构建固定宽度的模型,并将其转换为可以与视口一起扩展和收缩的流体网格?

第一种成分:流体网格

如果您曾使用ems调整文本大小,那么您已准备好回答该问题。假设我的body元素的字体大小为100% - 默认情况下,它相当于16px。在文档中,我有一个标题,应该在comp中调整大小为22px,但我想把它设置在漂亮的相对ems中。为此,我们只需获取标题字体大小的目标值(以像素为单位),并将其除以其容器的字体大小 - 即其上下文。结果是我们所需的字体大小,以比例的em-ready术语表示。换句话说:target÷context = result。

我们可以获取像素值并将其插入此公式中。要以相对的方式正确设置标题,请将目标值(22px)除以其上下文的字体大小(16px):22÷16 = 1.375。

The design for our robot site is modest, and so is the eight column grid that it’s based on

我们的机器人站点的设计是适度的,它所基于的八列网格也是如此

我们有:我们的标题是默认正文大小的1.375倍,或1.375em,我们可以将其直接复制到标题的font-size属性中。

我们刚刚描述的字体大小不是像素,而是根据元素的容器测量的比例。但是我们网格中的每个元素 - 以及放在它上面的元素 - 都可以按照完全相同的方式按比例表示。换句话说,我们不仅要查看特定元素的所需大小,还要查看该大小与元素容器的关系。这样做将允许我们构建一个基于像素的宽度可能会改变的网格,但是当它调整大小时,其固有比例将保持不变。全部通过重用我们可靠的类型公式:target÷context = result。

看看设计(见下文),我们可以看到内容区域的宽度设计为637px,内部有两个重要元素:向右浮动的主要内容是420px宽;元数据浮动到左侧,大小为204px。如果我们满足于像素,我们现在就完成了我们的工作:

#blog .main {float:right;宽度:420px; } #blog .aside {float:left;宽度:204px; }

当然,我们可以做得更好。来自comp的像素值只是我们的目标值,我们可以用相对的术语表达。让我们从主要内容区域开始,其目标值是420px。但是,该元素包含在637px的设计宽度内 - 整个博客模块的宽度。所以我们需要做的就是将两者分开:420÷637 = 0.659340659。将小数移动到右边的两个位置,我们得到65.9340659%,我们可以直接放入CSS中的宽度(抵制围绕该数字的冲动;浏览器实际上擅长为您处理):

#blog .main {float:right;宽度:65.9340659%; / * 420px / 637px * /}

A visual inventory of the blog, which we’ll use to construct a simple, flexible grid

博客的可视化清单,我们将用它来构建一个简单,灵活的网格

让我们看看我们是否可以对元数据的目标值204px做同样的事情。使用与以前相同的上下文(637px),得到204÷637 = .32025117。和以前一样,我们可以使用0.32025117或32.025117%,并将其直接应用于元数据的宽度:

#blog .aside {float:left;宽度:32.025117%; / * 204px / 637px * /}

所以我们已经完成了大型的宏级列。但我们还没完成;在主内容块中嵌入了一个pullquote,浮动到右边。根据comp,它与我们的元数据(204px)的宽度相同,因为每个元素在网格中只占据一列。但是,虽然我们按比例描述.main和.metadata相对于我们设计的整个宽度(637px),但我们的blockquote嵌套在.main中。我们的背景发生了变化

Without any CSS constraints, images will just overflow out of their flexible containers

没有任何CSS约束,图像将从其灵活容器中溢出

我们需要将它除以.main,其父元素和新上下文的宽度,而不是除以637px - 204÷637 = .32025117:204÷420 = .48571。有了这个,我们完成了我们的小模型。我们的新宽度是.48571,它精美地描述了我们的pullquote相对于其容器的宽度 - 所有这些都是灵活的,比例的。

#blog blockquote {float:right;宽度:32.025117%; / * 204px / 637px * /}

构造流体网格就是这么简单:通过上下文划分目标像素值会产生合理,灵活的宽度。随着视口的扩展和收缩,各列的像素宽度会发生变化,但网格的比例会保持不变。

With max-width: 100% applied, images work perfectly in a flexible environment

最大宽度:100%应用,图像在灵活的环境中完美地工作

当然,自从我提出初始方法以来,最近一些CSS框架已经应对了创建灵活网格的挑战。Nicole Sullivan的OOCSS网格模块是非凡的; designinfluences.com/fluid960gshttp://designinfluences.com/fluid960gs有一个“流动端口”,可能是该框架用户感兴趣的。但是如果你正在使用不规则网格,或者你对框架不感兴趣,那么目标÷context =结果公式就是构建自己灵活的基于网格的设计所需的全部内容。

第二个成分:灵活的图像

随着我们的网格到位并精美地调整大小,让我们专注于合并一些固定宽度的元素。毕竟,文本在柔性容器中回流非常简单;当我们引入固定宽度的元素时会发生什么?好吧,我听说网络上的图片会很大,所以让我们从那里开始吧。

当我们放入一个我们知道比它的容器大的超大图形时会发生什么?可怕的,无法形容的东西。我们的图像宽度超过千像素,宽度没有任何限制。它只是溢出其容器,并彻底打破我们的页面。但是,如果我们可以说我们的图像应该回流并按比例调整大小,并且不应该超过其容器的宽度呢?快速使用CSS,我们可以得到:

Img {max-width:100%; }

首先发现Clearleft的Richard Rutter,max-width:100%技术确保图像永远不会超过其包含元素的宽度。如果其容器的宽度发生变化,则图像会在几乎所有现代浏览器中按比例调整大小。最大宽度:100%处理也适用于其他嵌入式媒体,例如视频:

img,video,object {max-width:100%; }

当然,IE不支持max-width预IE7。如果这是一个问题,可以使用变通方法。一些包括基于JavaScript的补丁,以实现类似最大宽度的行为;其他人使用专有的,仅限Microsoft的CSS表达式来模拟效果。我建议一个更简单的方法:只需将此规则放入特定于IE的样式表中:

Img {宽度:100%; }

Our first media query can repair our broken masthead, optimising the layout for a smaller display

我们的第一个媒体查询可以修复我们破损的标头,优化小尺寸显示器的布局

请注意,这是一个完全不同的规则:而max-width:100%表示元素不应超过其容器的宽度,宽度:100%表示元素应始终与其容器的宽度匹配。因此,我建议将特定于IE的规则确定为可以预测的与容器相关的超大元素,如下所示:

img.full,.entry img,.entry object {width:100%; }

我们现在已经完成了一个与浏览器窗口成比例扩展和缩放的设计。但是响应地说,我们的工作还没有完成。

第三个要素:媒体查询

灵活或固定,没有任何设计超出其最初设计的环境。当变小时,用于导航的背景精灵会以较小的分辨率被剪裁,并且我们的内容变得非常狭窄。相反,当在宽屏显示器上观看时,图像变得非常大。

输入媒体查询。作为CSS3规范的一部分,媒体查询使我们能够检查渲染设计的设备的物理特性。如果设备通过了查询中列出的测试,则会加载其中包含的CSS。随着我们灵活的布局调整,我们可以应用不同分辨率范围的媒体查询来手动纠正问题 - 无论是在扩大的桌面浏览器窗口还是在移动设备上。

例如,让我们来处理一些较小的屏幕显示。由于当浏览器窗口为660px或更低时出现问题,我可以创建一个针对该范围的媒体查询:

@media屏幕和(最大宽度:660px){...}

Our widescreen display is a drastic shift, but one responsively optimised for that reading context

我们的宽屏显示器是一个巨大的转变,但一个响应优化的阅读环境

有了这些,我将包含一些规则来重新定位一些标头元素,在较小的视口中优化它们的显示。例如,我可以通过将每个徽标放在自己的行上来将徽标与导航隔离开来,并使每个主要导航项占据屏幕的大约四分之一。

@media screen和(max-width:660px){#logo a {display:block; float:none;保证金:0自动; } #nav {clear:both; padding-top:0; } #nav li {margin-right:1.5053763%;宽度:23.87096774%; }}

但如果以较小的分辨率观看,或者只是在纵向模式下重定向呢?没问题:我可以通过添加另一个媒体查询轻松地将导航切换到堆叠的两列布局:

@media screen和(max-width:340px){#nav li {width:49.247311827956989247%; / * 458px / 930px * /}}

然而,这不仅仅是关于“降低设计”:我们还可以使用媒体查询来优化分辨率频谱的更高端。通过包含一个@media屏幕和(min-width:1100px)块,我可以引入一个替代布局来优化我的内容以用于更大的显示。有了这三个媒体查询,我们的网站终于完成了。

一起工作

将响应式网页设计的概念简化为其中一个组成部分是很诱人的,它只是“用媒体查询触发替代布局”,或者可能是“为移动设计”。事实上,这三个组件是不可分割的:不支持媒体查询的设备或浏览器仍然可以利用灵活的布局,提供一定程度的分辨率独立性。

当然,这不是摆在我们面前的挑战的结束。高度艺术化的布局如何适应不断变化的浏览器窗口?我们如何在较小的显示器上重新思考复杂,交互繁重的界面?响应式网页设计为我们提供了一个基础,一个解决这些问题的框架 - 无论是现在还是未来。



翻译字数超限