电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（7） [打印本页]

作者: look_w 时间: 2019-2-18 19:08 标题: 响应式Web设计：使用HTML5和CSS3实践（7）

3.4 用em换成px

最初设计师们使用em是因为在老版本的Internet Explorer无法缩放像素单位的文字。但现代浏览器早就支持了，那么用em替代px还有什么优越性呢。有两点理由：

（1）那:wq些使用Internet Explorer的用户也能够缩放文字

（2）这样做使设计师们的工作变得更加简单

em的实际大小是相对于上下文字体大小而言的，如果我们给body标签设置的文字大小是100%，给其他的文字都使用相对单位em，那么这些字体都会受到body上的初始声明的影响。这样做的好处是，如果完成了所有文字排版以后客户提出希望把字体整体调大一些，那么我们只需要修改body的文字大小其他所有文字都会相应变化。

同样，目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸这个公式也适用于将文字的像素单位转换为相对单位。现代浏览器的默认字体大小都是16像素(作者疏漏了还是过时了明明是14好么)，因此一开始给body标签应用如下任何一条规则都是一样的效果：

font-size: 16px;
font-size: 100%;
font-size: 1em;

举一个例子，我们为为网站标题设置了如下样式：

#logo {
      display: block;
      padding-top: 75px;
      color: #0d0c0c;
      text-transform: uppercase;
      font-family: Arial, "Lucida Grande", Verdana, sans-serif font-size: 48px;
}
#logo span {
      color: #dfdada;
}

因为48/16=3,我们可以对字体大小进行改动：

font-size: 3em; /* 48 ÷ 16 = 3*/

如果应用这个规则除了毛病，通常是目标元素的上下文发生了变化，以页面中的标签为例：

<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>

修改后的相对单位样式如下：

#content h1 {
      font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase;
      font-size: 4.3125em; /* 69 ÷ 16 */
}
#content h1 span {
      display: block;
      line-height: 1.052631579em; /* 40 ÷ 38 */
      color: #757474;
      font-size: .550724638em; /* 38 ÷ 69 */
}

可以看到，span的元素大小是相对于其父元素的文字的大小，而它的行高是相对于文字本身的大小。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)