px rpx vw vh em rem的区别和使用方法

涉及到网页和移动应用的开发，通常需要考虑到不同设备屏幕的尺寸和分辨率适配，因此在编写 CSS 样式时，根据设计需求和布局适配的要求选择不同的单位，以实现响应式设计。下面说说px rpx vw vh em rem的区别和使用方法。

1、px（像素）

相对单位，代表屏幕上的一个基本单位，逻辑像素

不会根据屏幕尺寸或分辨率自动调整大小

在高分辨率屏幕上可能显得很小

2、rpx（微信小程序单位）

主要用于微信小程序开发

是相对单位，基于屏幕宽度进行缩放

可以在不同设备上保持一致的布局

3、vw（视窗宽度单位）

相对单位，表示视窗宽度的百分比

1vw 等于视窗宽度的 1%

用于创建适应不同屏幕宽度的布局

4、vh（视窗高度单位）

相对单位，表示视窗高度的百分比

1vh 等于视窗高度的 1%

用于创建根据屏幕高度进行布局调整的效果

5、rem（根元素单位）

相对单位，基于根元素的字体大小

1rem 等于根元素的字体大小

可用于实现相对大小的字体和元素，适合响应式设计

6、em（字体相对单位）

相对单位，基于当前元素的字体大小

1em 等于当前元素的字体大小

通常用于设置相对于父元素的字体大小