3.4 用 em 替换 px
过去的几年里，网页设计师使用em替代px主要是为了文字缩放。因为老版本的Internet Explorer无法缩放像素单位的文字。不过现代浏览器很久以前就支持缩放以像素为单位的文字了。那用em替换px还有什么必要性或优越性呢？有两点显而易见的理由：一是那些使用Internet Explorer 6的用户也将能够缩放文字，二是这样做可以使我们设计师和开发者的生活更简单。em的实际大小是相对于其上下文的字体大小而言的。如果我们给<body>标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受body上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改body的文字大小，其他所有文字也会相应变大。
同样，“目标元素尺寸÷上下文元素尺寸＝百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。值得注意的是，现代浏览器的默认文字大小都是16像素（显式声明的除外）。因此一开始给body标签应用下列任何一条规则所产生的效果都一样：
下面举一个例子。示例网站的样式表中，第一段以像素为单位的文字就是页面左上角的网站标题：AND THE WINNER ISN’T…
因为48 ÷ 16 ＝ 3，所以我们将样式修改如下：
这个逻辑在整个网站中通用。如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。以页面中的标签为例：
修改后的相对单位样式如下：
可以看到<span>元素的文字大小（38像素）是相对于其父元素的文字大小（69像素）而言的。而它的行高（40像素）则是相对于其本身的文字大小（38像素）而言。
现在，我们的页面结构可以自动缩放，文字大小也已从像素单位转换成相对单位。但是，我们还必须解决图片大小随视口缩放的问题。那我们接下来看看这个问题。
em究竟是什么？
em是书面形式的大写字母“M”的简称，发音和M相同。以前，“M”常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字母。如今，em作为一个测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论