前端每日一练：px，rpx，vw，vh，rem，em 的区别

当涉及到网页和移动应用的开发，我们通常需要考虑到不同设备屏幕的尺寸和分辨率适配，因此使用不同的单位来表示长度和布局。下面是 px、rpx、vw、vh、rem 和 em 这些常见单位的区别：

1. px（像素）：

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

2. rpx（微信小程序单位）：

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

3. vw（视窗宽度单位）：

   • 相对单位，表示视窗宽度的百分比。
   • 1vw 等于视窗宽度的 1%。
   • 用于创建适应不同屏幕宽度的布局。

4. vh（视窗高度单位）：

   • 相对单位，表示视窗高度的百分比。
   • 1vh 等于视窗高度的 1%。
   • 用于创建根据屏幕高度进行布局调整的效果。

5. rem（根元素单位）：

   • 相对单位，基于根元素的字体大小。
   • 1rem 等于根元素的字体大小。
   • 可用于实现相对大小的字体和元素，适合响应式设计。

6. em（字体相对单位）：

   • 相对单位，基于当前元素的字体大小。
   • 1em 等于当前元素的字体大小。
   • 通常用于设置相对于父元素的字体大小。

在编写 CSS 样式时，根据设计需求和布局适配的要求选择不同的单位。使用相对单位（如 rpx、vw、vh、rem、em）可以更好地适应不同屏幕尺寸，实现响应式设计。