css rpx rem

CSS是层叠样式表的缩写，是网页设计和开发中不可或缺的一部分。在使用CSS时，我们可能会遇到rpx和rem这两个单位。

rpx是小程序中使用的一种相对单位，类似于CSS中的rem，主要用于适配不同屏幕大小的手机。

/* 将屏幕宽度等分成100份 */
html {
  font-size: calc(100vw / 100);
}

/* 在实际使用中，将设计稿中的尺寸除以2即可得到对应的rpx值 */
.box {
  width: 50rpx;
  height: 100rpx;
}

rem是CSS3新增的一个相对单位，相比于像素和百分比更加灵活，可以根据根元素的字体大小来进行相对计算。

/* 设置根元素的字体大小为10像素 */
html {
  font-size: 10px;
}

/* 在实际使用中，将设计稿中的尺寸除以10即可得到对应的rem值 */
.box {
  width: 5rem;
  height: 10rem;
}

总的来说，rpx和rem都是相对单位，不同之处在于计算基准不同。在实际使用中，我们需要根据具体情况选择合适的单位。