详解用em替换px

  em 的实际大小是相对于其上下文的字体大小而言的。如果我们给<body>标签设置文字大小为 100%,给其他文字都使用相对单位 em,那这些文字都会受body 上的初始声明的影响。这样做的好处就是,如果在完成了所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改 body 的文字大小,其他所有文字也会相应变大。 

  在这里,我们可以使用这个公式,来将文字的像素单位转换为相对单位。

  “目标元素的尺寸÷上下文元素的尺寸=百分比尺寸”

  值得注意的是,现代浏览器的默认文字大小都是 16 像素(显式声明的除外)。因此一开始给 body 标签应用下列任何一条规则所产生的效果都一样:  

         font-size: 100%;

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

  下面就以一段代码为例: 

  #logo {

    font-size: 48px;
  }

  因为 48 ÷ 16 = 3,所以我们将样式修改如下:  

  #logo {
    font-size: 3em; /* 48 ÷ 16 = 3*/
  }

  如果发现哪出了毛病,那应该是目标元素的上下文发生了变化。以页面中的标签为例:
    <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
  修改后的相对单位样式如下:
  #content h1 {
    font-size: 4.3125em; /* 69 ÷ 16 */

  }


  #content h1 span {
    line-height: 1.052631579em; /* 40 ÷ 38 */
    font-size: .550724638em; /* 38 ÷ 69 */
  }
  可以看到<span>元素的文字大小(38 像素)是相对于其父元素的文字大小(69 像素)而言的。而它的行高(40 像素)则是相对于其本身的文字大小(38 像素)而言。

  ps:如果发现哪出了毛病,那应该是目标元素的上下文发生了变化。

posted @ 2017-06-09 17:18  江峰★  阅读(459)  评论(0编辑  收藏  举报