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是相对于当前元素的字体大小。通常用于网页设计中设置文本的大小，具有相对的特性，可以根据父元素的字体大小进行缩放。
em单位验证
px像素单位验证
上面的代码两个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。很多时候，它是字体的中间标志。
不同点：
这两是基于字体的度量单位，依赖于设定的字体。
二、如何换算
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作为单位就行了。
4、rem和px换算
1rem等于html根元素设定的font-size的px值 如果css里面没有设定html的font-size,则默认浏览器以1rem= 16px来换算。
假如我们在css里面设定下面的css。那么后面的CSS里面的rem值则是以这个14来换算。
html{font- size:14px} 例如设定一个div宽度为3rem,高度为2.5rem. 则它换算成px为width:42px.height:35px 同理，假如一个设计稿为宽度42px,高度为35px 则换成rem,则是42/14=3rem, 35/14=2.5rem。 (14就是html的font-size)。
三、使用场景总结
1. 网页布局中一般都是用px。
2. 百分比一般宽泛的讲是相对于父元素，自适应网页布局用的多。
3. rem全局响应式布局，通过设置根元素的字体大小，我们可以很方便地实现全局的大小控制。
4. em也可以实现响应式设计，但是需要注意em的相对性。由于em的大小是相对于父元素计算的，所以它可能会受到父元素字体大小的影响。如果父元素字体大小发生变化，那么em单位也会相应地变化。
5. vw、vh 常用于移动端的布局之中。
6. pt 印刷行业常用单位/IOS开发基本单位/PS中的字体单位。
7. dp Google设定dp为Android开发基本单位，其效果与IOS中的pt类似，同样是为了一稿适配不同的移动端设备而创定的。1dp=1/160(inch)。
8. ch 用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。
9. ex 有很多用途，大部分用于版式的微调。比方说，sup 元素（上角文字标），可以通过position:relative;bottom: 1ex;实现 。
总的来说，选择合适的设计计量单位要根据具体的设计场景和需求来决定。例如，在网页设计中，使用 em 和 rem 可以实现响应式设计，而使用 vw 和 vh 可以实现流体布局。在印刷品设计中，则需要使用 pt 来保证输。
如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
我的线上博客：富朝阳的博客