CSS中px、em、rem、rpx的区别与用法解析。

CSS中px、em、rem、rpx四者的区别与用法：

px

px是像素，是相对长度单位，属于绝对单位，在不同的屏幕上1px的实际长度是不一样的，但是在同一屏幕上1px的长度是固定的。px只能用于固定大小的元素，如宽度、高度、字体大小、边框等，比如：

.box {
    width: 200px;
    height: 200px;
    font-size: 16px;
    border: 1px solid #ccc;
}

em

em是相对单位，相对于当前元素的字体大小来计算，如果当前元素的字体大小是16px，那么1em=16px，2em=32px。em可以用于字体大小、宽度、高度、边框等，比如：

.box {
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    border: 0.5em solid #ccc;
}

rem

rem是相对单位，相对于根元素（html）的字体大小来计算，如果根元素的字体大小是16px，那么1rem=16px，2rem=32px。rem可以用于字体大小、宽度、高度、边框等，比如：

.box {
    width: 10rem;
    height: 10rem;
    font-size: 1.5rem;
    border: 0.5rem solid #ccc;
}

rpx

rpx是微信小程序特有的单位，它是相对于设备宽度来计算，如果设备宽度是750px，那么1rpx=1px，2rpx=2px。rpx可以用于字体大小、宽度、高度、边框等，比如：

.box {
    width: 750rpx;
    height: 750rpx;
    font-size: 30rpx;
    border: 10rpx solid #ccc;
}

：px是绝对单位，em和rem是相对单位，rpx是微信小程序特有的单位。