[令开发者着迷的智能化开发工具.docxVIP

令开发者着迷的智能化开发工具导言：HTML5框架内的响应式网页设计能够使网站的页面布局根据不同的设备和设备屏幕的分辨率进行自动调整，对于现今拥有多种智能终端的用户来说，这种网页设计省去了调整页面分辨率的麻烦。而对于开发者而言，页面有能力去自动响应用户的设备环境，能够自动兼容多个终端，他们就可以不再为新设备为每个不同平台的终端做专门的版本设计和开发，从而减少重复劳动。?这一点，不仅对于其他平台来说很重要，对于吸引更多开发者进驻的/WP生态来说，也至关重要。?本文作者Emily P. Lewis就详细的阐述了响应式网页设计的基础要素，而通过翻译原文和亲身感受@亓光宇为各位开发者提供了自己对于响应式网页设计的看法。原文如下：?在过去的一年里，如果你不是住在深山里，就一定知道响应式网页设计，它已经成为当今的主流。响应式设计是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中,将元素的宽度设定为这个比例值:1、aside?{2、background-color:?#ccc;3、float:?left;4、width:?31.25%;5、}?测试一下公式虽然看起来很简单，但我知道必须在实际的网站中检验一下才行。幸运的是，我最近加入了EE播客，正在重新设计那个网站。当我的搭档给我她的 PS 设计文件时，我就决定将它打造成灵活布局的网站。?比例宽度我首先记录下所有元素的像素宽度。（在排版设计事，我们没有严格遵循网格布局，这也是我建议的做法）正如你在图2中看到的。整体宽度为940像素，Logo，主持人介绍和分享链接都有它们各自的像素宽度。图2 主页和顶部导航元素的像素宽度?按照 Ethan 的公式，整体宽度940px就是我的上下文宽度，根据它就可以确定所有元素的比例宽度。?Logo: 240 ÷ 940 = .255319148主持人介绍: 436 ÷ 940 = .463829787分享链接: 90 ÷ 940 = 随后我将这些浮点值转换成百分比值，运用到我的CSS中：1、#logo?a?{2、width:?25.5319148%