(CSS) px,pt,em,rem的区别

一、绝对长度单位

绝对长度单位代表一个物理测量,当输出介质的物理性质是已知的,如用于打印布局。这是通过将一个单元锚定到一个物理单元,并将其定义为相对于它的另一个。对于低分辨率的设备,如屏幕、高分辨率设备,如打印机,该锚定是不同的。

1.1 px(像素)

像素与显示设备相关。对于屏幕显示,通常是一个设备像素(点)的显示。对于打印机和高分辨率的屏幕,一个px意味着多个设备像素,因此,每英寸的像素的数量保持在96左右。

当你需要精确地像素时,用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同,所以显示效果可能有微小的不同。

用像素字体定义使得字体大小不可由用户的浏览器改变。所以,如果想创造能广泛使用的设计请避免使用像素设定字体。

1.2 pt(磅)

1pt = (1 / 72)in
另外:1in = 96px3pt = 4px25.4mm = 96px等。

二、相对长度单位

相对字体大小的单位

2.1 em

em值的大小是动态的。当定义font-size属性时,1em等于元素的父元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,通常是16px。所以通常1em = 16px2em = 32px。如果你设置了body元素的字体大小为20px,那1em = 20px2em = 40px。那个2就是当前em`大小的倍数。

<body>
  <div class = "parent">
    <div class = "child></div>
  </div>
</body>
body {
  font-size: 62.5%; /* 1em = 10px */
}
.parent {
  font-size: 2em; /* 2em = 20px */
}
.child {
  font-size: 2em; /* 2em = 40px 相对于.parent元素 */
}

使用时需注意1em指的是父元素的字体大小。

2.2 remroot em

remCSS3新增的单位,1rem等于html根元素的字体大小。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

<body>
  <div class = "parent">
    <div class = "child></div>
  </div>
</body>
body {
  font-size: 62.5%; /* 1rem = 10px */
}
.parent {
  font-size: 2rem; /* 2rem = 20px */
}
.child {
  font-size: 2rem; /* 2rem = 20px 相对于body元素 */
}

IE8及以下不支持rem,可多写一个px为单位的样式即可。

参考

  1. font-size – MDN

  2. <lengh> – MDN

    原文作者:kimi013
    原文地址: https://segmentfault.com/a/1190000007078447
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞