响应式网页设计的基础.docx

《响应式网页设计的基础.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、By EmilyP.Lewis  翻译: 亓光宇     在过去的一年里，如果你不是住在深山里，就一定知道响应式网页设计，它已经成为当今的主流。响应式设计是EthanMarcotte提出的，概念很简单：使网站的页面布局能够根据不同设备和分辨率进行自动调整。   当我第一次了解到它时，我就立即被迷住了--特别是mediaqueries，我马上就用到我自己的个人兼职网站上。我甚至写了一篇文章介绍《如何使用CSS3MediaQueries响应不同设备》（强烈建议在读这篇文章之前读一下）。    在第一次尝试使用mediaqueries后，我很快

2、意识到我忽略了一个响应式设计的重点：灵活性。 挑战固定宽度   我的个人兼职网站使用了固定宽度的设计，所有的width,margin和padding都使用了固定的像素值。我一般都会这样写网站，因为对我来说它更简单，更快速。   但当我试图在我的固定宽度的网站上应用mediaqueries的时候，那些简单和快速的优势全部都消失了。为什么?因为对于固定宽度的设计，我需要非常细致的定义mediaqueries并在CSS文件中调整每个单独的像素值，基本上，我需要为每一种可能的分辨率都设计一个全新的布局，繁琐！慢！！还不好玩！！！    我有幸听了

3、Marcotte先生在《InControl2011》的演讲，他讨论了响应式设计的理论和最佳实践，诸如fluidgrid(流体网格)实现方式。 流动且灵活的公式   流动式布局是灵活的。由于width，margin和padding（甚至字体和图像）使用了百分比和em(相对长度单位)，因此页面布局会随着浏览器的窗口变化而变化。随着分辨率的改变，布局会成比例地进行调整，实现过程中不需要用到任何mediaquery。   这对于实现响应式网页设计来说简直太美妙了。如果我有一个基于比例值的布局，流动式的网格将替我完成大部分繁重的工作。我的media

4、query将不再需要包含那些覆盖其他分辨率的所有width,margin和padding的样式定义。 但是也有一点让我感到头疼，计算流动式网格的比例宽度需要用到一些数学知识，我数学不太好… 幸运的是,Ethan提供了一个很简单（即便对我来说）的公式来计算比例宽度: 目标宽度÷上下文宽度=结果（比例宽度）   这个公式用子元素的像素宽度（目标宽度）除以它父元素的像素宽度（上下文宽度），得到的结果就是这个子元素的比例宽度。 图1实例：目标宽度（300px)和上下文宽度（960)像素   在图1中,例如,深灰色区域宽度为300px，包含在宽度为

5、960px的浅灰色区域中.这里,960像素区域是上下文元素,300像素区域是目标元素,所以我们的数学公式是: 300÷960=0.3125   0.3125这个结果需要变成浏览器可识别的数值,因此需要转化成一个比例值,将小数点右移两位，变成31.25%即可。然后在CSS中,将元素的宽度设定为这个比例值:  1.aside { 2.       background-color: #ccc; 3.       float: left; 4.       width: 31.25%; 5.} 测试一下     公式虽然看起来很简单，但我知道必

6、须在实际的网站中检验一下才行。幸运的是，我最近加入了EE播客，正在重新设计那个网站。当我的搭档给我她的PS设计文件时，我就决定将它打造成灵活布局的网站。 比例宽度    我首先记录下所有元素的像素宽度。（在排版设计事，我们没有严格遵循网格布局，这也是我建议的做法）正如你在图2中看到的。整体宽度为940像素，Logo，主持人介绍和分享链接都有它们各自的像素宽度。 图2主页和顶部导航元素的像素宽度 按照Ethan的公式，整体宽度940px就是我的上下文宽度，根据它就可以确定所有元素的比例宽度. Logo:240÷940=.255319148 

7、主持人介绍:436÷940=.463829787 分享链接:90÷940=.09574468 随后我将这些浮点值转换成百分比值，运用到我的CSS中：  1.#logo a { 2.width: 25.5319148%; /* 240px / 940px */ 3.} 4.#hosts { 5.width: 46.3829787%; /* 436px / 940px */ 6.} 7.#push { 8.width: 9.574468%; /* 90px / 940px */ 9.}   我没有对这些百分比值进行四舍五入，而是直接运用在CS

8、S中。我也从来没有遇到过任何浏览器对这样精度的百分比值识别错误的情况(包括IE)。   同时，我为每一个百分比值都注释了计算它所用到的目标宽度和上下文宽度，这对于今后的开发来说是非常重要的参考