前端像素单位都有哪些?(px、rpx、em、rem.? ) 📐

导读在前端开发中，选择合适的单位是布局的关键。首先，我们来聊聊`px`，这是最常用的绝对单位，一个`px`等于屏幕上的一个物理像素点。但使用`p

在前端开发中，选择合适的单位是布局的关键。首先，我们来聊聊`px`，这是最常用的绝对单位，一个`px`等于屏幕上的一个物理像素点。但使用`px`时，不同设备的显示效果可能会有所不同，这时就需要用到`rem`了。`rem`是一个相对单位，相对于根元素（即``标签）的字体大小，它使得页面在不同设备上能有更好的响应性。

接下来是`em`，这也是个相对单位，但它是相对于当前元素的字体大小。这意味着如果你在一个父元素中设置了一个字体大小，那么所有子元素使用`em`作为单位时，它们的尺寸会基于这个父元素的字体大小进行调整。

最后是`rpx`，这个单位主要在微信小程序中使用，代表的是“responsive pixel”，可以根据屏幕宽度自适应调整。在750px的设计稿中，`1rpx = 0.5px`，这样可以确保设计稿在不同设备上看起来一致。