rem、em和px都是CSS中用于设置元素尺寸的单位，它们的区别和计算方式如下：

相对单位 vs 绝对单位

px，像素，是一个绝对单位，它提供了一个具体的、固定的尺寸。1像素等于屏幕上的一个实际像素点，是相对于显示器屏幕分辨率而言的，是一个绝对单位，不随页面缩放而变化。因此，px单位指定的大小在不同设备和屏幕上保持不变，不受其他因素的影响。计算方式为：1px = 1/96英寸。

em，一个相对长度单位，是相对于元素自身的字体大小而言的，如果元素没有设置字体大小，则相对于父元素的字体大小。1em等于元素的字体大小。因此，em的大小会根据上下文而变化。计算方式为：1em = 元素字体大小。

3. rem，根元素字体大小单位，是相对于根元素（即html元素）的字体大小而言的，它不受元素字体大小和父元素字体大小的影响，只受根元素字体大小的影响。计算方式为：1rem = 根元素字体大小。

可扩展性：

px单位的尺寸是固定的，不会根据用户的偏好或设备屏幕的大小而改变。这使得它在某些情况下很有用，如确保文本大小的一致性。

em单位更灵活，可以根据用户的字体大小设置和父元素的字体大小来自动调整。这对于响应式设计和用户可访问性非常有用。

rem单位更灵活，可以根据根元素的字体大小来自动调整。这对于适配不同型号的设备屏幕更为有用。

应用范围

px通常用于设置固定大小的元素，如边框、内边距或其他元素的尺寸。

rem和em通常用于调整文本大小，以及在响应式设计中，以便根据不同的视口大小和字体设置来自动调整元素的大小。

继承性

px单位的尺寸不受父元素字体大小的影响。它是绝对的，不会继承任何值。

rem单位的尺寸是相对的，会继承根元素的字体大小。这可以用于创建相对于根元素字体大小的布局。

em单位的尺寸是相对的，会继承父元素的字体大小。这可以用于创建相对于父元素字体大小的布局。

综上所述，在实际开发中，通常使用rem作为单位，因为它可以根据根元素字体大小的变化而自适应调整元素尺寸，适用于响应式布局。而px和em则适用于一些特定的场景，例如设置边框、阴影、字体大小等。