css中的px、em、rem、pt 特点和区别及换算详解

下面就是对于“css中的px、em、rem、pt 特点和区别及换算详解”的完整攻略：

标题

CSS中的各种单位包括px、em、rem和pt，它们各具特点，适用的场景也各不相同，这篇攻略将对它们进行详细的讲解，以及提供相应的换算公式。

px

px是CSS中最常用的单位，指的是像素（pixel），它是一个相对静态的单位，不随浏览器的缩放而变化。CSS中使用像素指定元素的尺寸、边距和间距等参数是非常方便的。在开发中，我们通常会使用px作为字体尺寸、边框宽度、元素宽高等值的单位，这样可以确保在不同设备下呈现的效果一致。

在进行布局的时候，我们通常还要考虑元素之间的距离和大小等问题。如果使用相对单位，这将会变得非常麻烦。比如说，如果对于一个宽度为1000px的容器，我们希望左右两个容器之间的间距为100px，如果使用像素来设置，那么我们就需要margin-left: 100px; margin-right: 100px;。但是如果对于一个宽度为600px的容器，同样的设置将会让容器无法显示完全。因此，像素单位并不能适用于所有的情况。

em

em是一个相对单位，在CSS中用来表示相对于文本的字体大小的倍数。例如，如果一个元素的字体大小为16px，而另一个元素的字体大小为2em，那么它的字体大小就是32px。在设置字体大小时，我们通常使用em，因为它能够根据浏览器字体大小的缩放而自动调整，这样就能够实现网页的无障碍浏览。

除了作为字体大小的单位之外，em还可以用于元素的宽高等属性。注意到，em在不同的上下文中具有不同的含义。比如说，对于一个父元素的子元素，其宽度等于父元素宽度的2em，而不是字体大小的2em。

rem

rem也是一个相对单位，它跟em有些相似，但是rem使用的是根级元素(html)的字体大小作为参照，这样不同浏览器和设备下的字体大小都一样，保证了常数的大小。在设置字体大小时，我们通常使用rem，并将html元素的字体大小设置为常用的16像素。

rem常用于提高网站的可访问性和可维护性，它能够让在不同的浏览器和设备下呈现的效果一致。

pt

pt是一个绝对单位，它表示打印者点，1pt=1/72英寸，在打印设计中用得比较多。在网页设计中使用pt作为单位不太常见，因为它不能根据不同设备的分辨率而自动调整。如果我们要在网页中使用pt作为单位，通常会选择将像素和pt之间进行转换。

不同单位之间的转换

下面提供一些常用的转换公式：

• 像素(px) 转 毫米(mm) ：px/25.4*96
• 毫米(mm) 转 像素(px) ：mm*96/25.4
• 像素(px) 转 英寸(in) ：px/96
• 英寸(in) 转 像素(px) ：in*96

除此之外，还有很多工具可以帮助我们进行px和其他单位之间的换算，比如说pxtoem等。

示例说明

例子1

将一个文本框的边框宽度设置成1像素(px)，内部的字体大小设置成14像素(px)，可以这样写：

input[type="text"] {
  border: 1px solid #ccc;
  font-size: 14px;
}

例子2

假设我们有一个容器，宽度为600像素(px)，内部有两个块级元素，左右相邻且中间有20像素(px)的间距。可以这样写：

.container {
  width: 600px;
}
.box {
  width: calc((100% - 20px)/2);
  float: left;
}

在这里，我们使用calc()函数计算出了盒状元素的宽度，这样就可以自适应不同大小的窗口了。