HTML5&CSS3笔记：流式布局

用em替换px

那用 em 替换 px 还有什么必要性或优越性呢?

有两点显而易见的理由：
一是那些使用 Internet Explorer 6 的用户也将能够缩放文字；
二是这样做可以使我们设计师和开发者的生活更简单。em 的实际大小是相对于其上下文的字体大小而言的。如果我们给body标签设置文字大小为 100%，给其他文字都使用相对单位 em，那这些文字都会受 body 上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改 body 的文字大小，其他所有文字也会相应变大。

“目标元素尺寸÷上下文元素尺寸=百分比尺寸”公式用于将文字的像素单位转换为相对单位。值得注意的是，现代浏览器的默认文字大小都是 16 像素(显式声明的除外)。因此一开始给 body 标签应用下列任何一条规则所产生的效果都一样：

为不同的屏幕尺寸提供不同的图片

图片尺寸必须比其显示尺寸更大以保证渲染效果，否则的话图片可能看起来很糟糕。基于这个原因，图片文件的体积就永远比实际显示所需的大。

很多人都在研究这个问题，尝试为较小的屏幕尺寸提供较小的图片。可以使用 Matt Wilcox 的“自适应图片”(http://adaptive-images.com)了。Matt Wilcox 的解决方案则不需要对图片标签做修改，而且他的方案会根据标签中已经设定的全尺寸图片自动创建各种尺寸的图片。这种解决方案允许基于一组屏幕尺寸断点，根据用户需要为其提供不同的图片。

实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库，也就是说需要 Web 服务器端编程。