px、em、rem、rpx 區別及應用場景
阿新 • • 發佈：2021-08-10
px 畫素畫素px是相對於顯示器螢幕解析度而言的
em 子元素字型大小的em是相對於父元素字型大小。
任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
rem 是css3新增的相對單位<html>元素。和em的區別是 rem 相對於根元素, 通常做法是給html元素設定一個字型大小，然後其他元素的長度單位就為rem
rem與em的選擇？
如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用;
用於做響應式頁面，不過我更傾向於rem，因為em不同元素的參照物不一樣（都是該元素父元素），所以在計算的時候不方便，相比之下rem就只有一個參照物（html元素），這樣計算起來更清晰。
px 與 rem 的選擇？
對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可 。
對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置。
rpx 是微信小程式解決自適應螢幕尺寸的尺寸單位。微信小程式規定螢幕的寬度為750rpx。
無論是在iPhone6上面還是其他機型上面都是750rpx的螢幕寬度，拿iPhone6來講，螢幕寬度為375px，把它分為750rpx後， 1rpx = 0.5px。
微信小程式同時也支援rem尺寸單位， rem 規定螢幕的寬度為20rem, 所以 1rem = (750/20)rpx = 37.5 rpx