px? pt? dp? em？rem？vw？vh？ch？ex？这些单位你了解吗？

前言

一、常见单位

1、px单位

2、dp单位

3、pt单位

4、百分比%

5、em单位

6、rem单位

7、vw和vh单位

8、ch、ex单位

二、如何换算

1、 pt和px换算

2、px和dp换算

3、em和px换算

4、rem和px换算

三、总结

前言

前端开发在日常设计中除了最常用的 px 以外，还会经常看到 dp、pt、em、rem 等单位，那么这些单位都有什么区别呢？今天我给大家归纳总结一下，大家记得收藏以备之后工作需要哦～。

一、常见单位

1、px单位

px像素，是网页设计和移动应用设计中最常用的单位。表示屏幕上的一个点，根据显示设备具有固定的大小，不受其他因素影响。常用于确定文本、图像和元素的大小和位置。

2、dp单位

dp（也称为 dip）：设备独立像素，是一个相对的尺寸单位，表示屏幕上的一个点。与 px 不同，dp 能够根据设备的像素密度进行自适应缩放，从而在不同设备上保持一致的大小。

3、pt单位

pt是磅值，常用于印刷品设计中。表示打印出来的一个点，和像素不同，它不是固定的，而是基于印刷设备的分辨率和输出质量来计算的。因此，使用磅值可以确保在不同设备上输出的印刷品大小一致。

4、百分比%

百分比在前端开发中是一个动态单位，永远以当前元素的父元素作为参考进行计算。

元素尺寸百分比

我们可以创建一个容器，在容器中包含网页的主要内容。我们使用百分比来设置容器的宽度和高度，使其能够根据用户的屏幕尺寸自动调整大小。例如：

.container {width: 80%;height: 50%;
}

在这个例子中，容器的宽度和高度都设置为百分比，分别为80%和50%。这意味着无论用户的屏幕尺寸如何，容器都会自动调整大小，并且在任何设备上都能够很好地显示。

元素位置百分比

通过使用百分比，我们还可以设置元素相对于其容器的位置。这对于设计一个具有居中或者自适应特点的网站非常有用。例如：

.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

在这个例子中，我们使用百分比来设置元素的位置，使其在其容器中居中显示。我们首先使用position:absolute将元素定位为绝对定位，然后使用top:50%和left:50%将其位置相对于其容器居中定位。最后，我们使用transform:translate(-50%,-50%)将元素的位置进行微调，使其居中。

颜色和背景百分比

h1 {color: rgba(100%,0%,0%,0.5);background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

在这个例子中，我们使用百分比来设置文本和背景的透明度。具体来说，我们将文本的颜色设置为红色，并将其透明度设置为50%。而背景则使用linear-gradient来设置一个红色渐变背景，同时将透明度从60%到0%进行渐变。这样，我们就可以创建出一个半透明的文本和背景效果。

5、em单位

em是相对于当前元素的字体大小。通常用于网页设计中设置文本的大小，具有相对的特性，可以根据父元素的字体大小进行缩放。

<style>div {font-size: 18px;  /* 设置父元素的字体大小 */}span:nth-child(1) {font-size: 1em;   /* 1em相当于1*18px=18px */}span:nth-child(2) {font-size: 18px;}
</style>
<body><div><span>em单位验证</span><br><span>px像素单位验证</span></div>
</body>

上面的代码两个span标签里面的文字是一样的，虽然第一个span标签设置的字体为1em，第二个span标签设置的字体大小为18px，但是最后得到的效果是一模一样的。这是因为span的父元素div设置的字体大小为18px，所以1em=18px。接验证了em单位是相对于父元素而言的。

em特点：

em的值并不是固定的；
em会继承父级元素的字体大小。

6、rem单位

rem是相对于根元素的字体大小。也是用于网页设计中设置文本的大小，但相对于 em，它是相对于根元素的字体大小进行缩放，因此更加稳定和一致。比如我定义：

html{ font-size:14px}

那么设为2rem的话就相当于 2*14px。也就是

.box{font-size:2rem;/*font-size:28px;*//*2*14px/
}

使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。因此我们一般使用rem作为移动端的主流单位，可以很好的来控制整个页面的元素大小比例。

优点：

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

缺点：

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

7、vw和vh单位

vw 相对于视口的宽度。视口被均分为100单位。

h1 {font-size: 8vw;
}

再举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

vh 相对于视口的宽度。视口被均分为100单位

h1 {font-size: 8vh;
}

再举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px

总结：

vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%。

缺点：兼容性很差，不推荐使用，目前用的很舒服的还是px和rem。

8、ch、ex单位

ch单位

ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。常用于设置固定宽度的元素，如表格、代码块等，可以保证每个字符的宽度一致。

使用场景：

用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

ex单位

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。很多时候，它是字体的中间标志。

使用场景：

有很多用途，大部分用于版式的微调。比方说，sup 元素（上角文字标），可以通过position:relative;bottom: 1ex;实现。

不同点：

这两是基于字体的度量单位，依赖于设定的字体。

二、如何换算

1、 pt和px换算

公式一： 1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 )， 1pt=1px; 当新建画布分辨率为72*2=144ppi时，1pt=2px

2、px和dp换算

dp为安卓开发时的长度单位，根据不同的屏幕分辨率，与px有不同的对应关系。

安卓端屏幕大小各不相同，根据其像素密度，分为以下几种规格：

1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即，在xhdpi的密度下，1dp=2px;在hdpi情况下，1dp=1.5px。其他类推。

1dp=(屏幕ppi/ 160)px

以WVGA屏为例，该屏幕为480px*800px，按3.8寸屏算，点密度 √ (480^2 + 800^2) / 3.8 = 245，约等于240，对应于hdpi屏幕，所以该屏幕1dp=1.5px

3、em和px换算

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。