前端 px、rpx、em、rem、vh、vw计量单位的区别

目录

一、px

二、rpx

三、em

四、rem

五、vh和vw

六、rpx 和 px之间的区别

七、px 与 rem 的区别

---

一、px

px（像素）：

1、相对单位，代表屏幕上的一个基本单位，逻辑像素。
2、不会根据屏幕尺寸或分辨率自动调整大小。
3、在高分辨率屏幕上可能显得很小。

二、rpx

rpx（微信小程序单位）：

1、主要用于微信小程序开发。
2、是相对单位，基于屏幕宽度进行缩放。
3、可以在不同设备上保持一致的布局。

三、em

‌em（element em）‌是相对于父元素的字体大小的单位。如果父元素的字体大小为16px，则1em等于16px。使用em单位时，元素的大小会随着父元素的字体大小的改变而变化。em单位适用于嵌套元素，特别是需要根据父元素的字体大小进行调整的情况。然而，em单位可能会受到任何继承的父元素字体大小的影响，这有时会导致布局的不确定性‌。

于 em 的的知识：
1、通常情况下，用户的浏览器默认渲染的文字大小是 16px。
2、用户可以通过重新定义根标签(或者父元素标签)的 font-size 属性来重新定义默认的文字大小
3、在响应式布局中，页面中的所有元素都使用额 em 单位值，em 是一个相对的大小，默认情况下 1em=16px
4、相对的大小计算的的参考物是指元素父元素的 font-size 的属性
5、比如一个在<div>设置字体大小为 16px，此时这个<div>的后代元素就基层了他的字体大小
6、font-size 属性具有继承性

em的运用：

html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 { 
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ 
    height: 1em; /* 此时实际height等于10px */
}

四、rem

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

rem的运用：

html {
   font-size: 12px; /* 根html 为 12px */
}

div {
    font-size: 2rem; /* 此时 div 的字体大小就是 24px */       
}

rem的优势：

父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

设置字体推荐使用rem，尽量不用用px或em。

五、vh和vw

vh（视口高度）和vw（视口宽度）：
1、vh和vw是相对于视口的高度和宽度的单位。
2、1vh等于视口高度的1%，1vw等于视口宽度的1%。
3、这些单位非常适合响应式设计，因为它们让元素根据屏幕大小自动调整大小。

这里是视窗指的是浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

六、rpx 和 px之间的区别

1、在普通网页开发中，最常用的像素单位是px
2、在小程序开发中，推荐使用 rpx 这种响应式的像素单位进行开发

七、px 与 rem 的区别

1、px 对于只需要适配少量设备，且分辨率对页面影响不大的，使用 px 即可， px 设置更为精准。
2、随着 rem 在众多的浏览器都得到支持，有需要考虑到对多设备，多分辨率的自适应，无疑这时候 rem 是最合适的（如：移动端的开发）。