px、rpx、em以及rem的区别与用法

px、rpx、em、rem是用于网页开发中表示全屏宽度或元素尺寸的单位。

1. px（像素）：是最常见的单位，它表示屏幕上的实际像素点。在不同设备上，px 会根据屏幕的分辨率进行换算，因此在不同设备上显示效果可能会有差异。

2. rpx（响应式像素）：是微信小程序中引入的单位，主要用于适配不同尺寸的手机屏幕。rpx 的换算规则是 750rpx 等于屏幕宽度，因此可以通过设置不同尺寸下的 rpx 值来实现适配效果。

根据微信小程序官方规定，在iPhone6上，1rpx等于1物理像素。因此，正确的换算关系为：1px = 2rpx根据750px设计图，可以将像素值直接乘以2来得到相应的rpx值。

3. em：是相对于父元素的字体大小的单位。如果父元素的字体大小为 16px，子元素设置 2em，则子元素的字体大小将会是 32px。

4. rem（相对于根元素的字体大小）：与 em 类似，但是相对的是根元素（即 html 元素）的字体大小。通常情况下，开发者会将根元素的字体大小设置为一个基准值，然后使用 rem 单位来表示其他元素的尺寸。这样可以方便地调整整个页面的比例。

http://pxtoem.com/

用法：
- 对于常规网页开发，一般是使用像素单位 px 来定义元素的尺寸和字体大小，在不同设备上可能需要做响应式适配。

- 对于微信小程序开发，可以使用 rpx 来适配不同尺寸的手机屏幕，在样式文件中可以直接使用 rpx 单位进行布局。

- 在一些特殊场景下，例如需要相对父元素字体大小调整子元素大小时，可以使用 em 单位。

- 如果需要整体页面的比例调整，可以使用 rem 单位，并设置根元素的字体大小为基准值。