在过去的一年里,如果你不是住在深山里,就一定知道响应式网页设计,它已经成为当今的主流。响应式设计是Ethan Marcotte提出的,概念很简单:使网站的页面布局能够根据不同设备和分辨率进行自动调整。
当我第一次了解到它时,我就立即被迷住了--特别是media queries,我马上就用到我自己的个人兼职网站上。我甚至写了一篇文章介绍《如何使用CSS3 Media Queries响应不同设备》(强烈建议在读这篇文章之前读一下)。
在第一次尝试使用media queries后,我很快意识到我忽略了一个响应式设计的重点: 灵活性。
挑战固定宽度
我的个人兼职网站使用了固定宽度的设计,所有的width, margin和padding都使用了固定的像素值。 我一般都会这样写网站,因为对我来说它更简单,更快速。
但当我试图在我的固定宽度的网站上应用media queries的时候,那些简单和快速的优势全部都消失了。为什么?因为对于固定宽度的设计,我需要非常细致的定义media queries并在CSS文件中调整每个单独的像素值,基本上,我需要为每一种可能的分辨率都设计一个全新的布局,繁琐!慢!!还不好玩!!!
我有幸听了Marcotte先生在《In Control 2011》的演讲,他讨论了响应式设计的理论和最佳实践,诸如fluid grid(流体网格)实现方式。
流动且灵活的公式
流动式布局是灵活的。由于width,margin和padding(甚至字体和图像)使用了百分比和em(相对长度单位),因此页面布局会随着浏览器的窗口变化而变化。随着分辨率的改变,布局会成比例地进行调整,实现过程中不需要用到任何media query。
这对于实现响应式网页设计来说简直太美妙了。如果我有一个基于比例值的布局,流动式的网格将替我完成大部分繁重的工作。我的media query将不再需要包含那些覆盖其他分辨率的所有width, margin和padding的样式定义。
但是也有一点让我感到头疼,计算流动式网格的比例宽度需要用到一些数学知识,我数学不太好…
幸运的是, Ethan 提供了一个很简单(即便对我来说)的公式来计算比例宽度:
目标宽度÷上下文宽度=结果(比例宽度)
这个公式用子元素的像素宽度(目标宽度)除以它父元素的像素宽度(上下文宽度),得到的结果就是这个子元素的比例宽度。
图1 实例:目标宽度(300px)和上下文宽度(960)像素
在图1中,例如,深灰色区域宽度为300px,包含在宽度为960px的浅灰色区域中.这里,960像素区域是上下文元素,300像素区域是目标元素,所以我们的数学公式是: 300 ÷ 960 = 0.3125
0.3125这个结果需要变成浏览器可识别的数值, 因此需要转化成一个比例值, 将小数点右移两位,变成31.25% 即可。然后在CSS中,将元素的宽度设定为这个比例值:
-
aside{
- background-color:#ccc;
- float:left;
- width:31.25%;
- }
测试一下
公式虽然看起来很简单,但我知道必须在实际的网站中检验一下才行。幸运的是,我最近加入了EE播客,正在重新设计那个网站。当我的搭档给我她的 PS 设计文件时,我就决定将它打造成灵活布局的网站。
比例宽度
我首先记录下所有元素的像素宽度。(在排版设计事,我们没有严格遵循网格布局,这也是我建议的做法)正如你