css中px,em,rem,rpx的区别

CSS中px、em、rem和rpx的区别

CSS中的长度单位有很多种，其中比较常用的有px、em、rem和rpx。不同的单位在使用时有着各自的特点和使用场景。

px

px是CSS中常见的单位，它是像素单位，表示固定的像素值。使用px单位大小是不会随着浏览器窗口大小的改变而改变的，这就意味着页面布局可能会因为不同的屏幕或者设备而产生变化，导致网页排版不合理。

div{
  font-size: 20px;
  width: 100px;
  height: 50px;
}

以上代码中， font-size 表示文字大小， width 和 height 表示盒子的大小，它们都采用了 px 作为长度单位。

em

em单位是相对单位，参照的是当前盒子的字体大小，1em表示当前元素字体的倍数。如果没有显式设置font-size，则使用父元素的字体大小作为参考单位。例如：

p{
  font-size: 16px;
  line-height: 1.5em;
}

以上代码中， line-height 的值是1.5em，即1.5倍的字体大小。这个值不受字体大小变化的影响，所以em单位在网页中会被广泛使用。

rem

rem也是相对单位，但不参考字体大小，而是参考根元素的字体大小。根元素是指html元素，因此rem单位是一种比较高级的相对单位，使用rem可以非常方便地设置响应式布局。

html{
  font-size: 20px;
}
div{
  width: 10rem;
  font-size: 1.2rem;
}

以上代码中， html 的字体大小被设置为20px，而 div 中的 width 采用了10rem，也就是200px。如果将 html 的字体大小改为16px，则 div 的宽度也会相应地变为160px。

rpx

rpx是小程序专属单位，类似于px，但是可以根据屏幕宽度进行自适应，也就是适配多种屏幕大小。在小程序中，1rpx会自动转化为不同分辨率下的不同像素值。

div{
  width: 100rpx;
  height: 50rpx;
}

以上代码中， width 和 height 分别采用了 rpx 作为长度单位，它们会根据不同屏幕的宽度自适应变化，以保持页面的一致性和可读性。

综上，不同的单位适用于不同的场景，选用正确的单位可以保证页面的灵活响应和美观性。