日期:2014-05-17  浏览次数:20695 次

CSS中px和em的区别

在设计页面字体的时候,我们通常选择的是px而不是em。在国内,无论是哪种类型的网站,大到新浪、搜狐小到一些个人站点都是这么做的。不为别的,就是因为他易用。而国外的网站则基本上都采用em作为字体的单位,他们考虑到的是网站的可扩展性。这样一来,网站的维护也就相对简单些。要改大或改小某些字体就不会影响到页面的整体布局。前者就很有可能出项布局错乱的现象。

文字的单位建议用px,块与块之间的单位用px。

首先,em不是固定的,它会继承父级元素的字体大小。雅虎的Yahoo fonts CSS 建议字体大小都用%表示,他们提供了一张px和%相互转换的表:

  • 10px => 77%
  • 11px => 85%
  • 12px => 93% (was 93)
  • 13px => 100%
  • 14px => 108% (was 107)
  • 15px => 116% (was 114)
  • 16px => 123.1% (was 122)
  • 17px => 131% (was 129)
  • 18px => 138.5% (was 136)
  • 19px => 146.5% (was 144)
  • 20px => 153.9% (was 152)
  • 21px => 161.6% (was 159)
  • 22px => 167%
  • 23px => 174%
  • 24px => 182%
  • 25px => 189%
  • 26px => 197%