【开发者问答】如何理解自适应单位 rpx 与 rem 的区别？
Posted: 2022年 Oct 21日 10:29
如题如题 
如题如题
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
rem 与 rpx 的区别在于使用真是物理设备宽度计算，不受手机陀螺仪横竖屏影响。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 7.5rem = 375px = 750 物理像素，0.01rem = 0.5px = 1 物理像素。
使用rem的话在横屏模式下和竖屏模式下，显示的大小是一致的。
【进阶技巧】
//less
.convert(@px) {
@var: (@px / 100);
@rem: ~'@{var}rem';
}
.rem {
width: .convert(200) [ @rem];
height: .convert(200) [ @rem];
background-color: #0b9162;
}
楼主如果这个小程序希望横竖屏的时候展示的大小都是一样大的话就可以考虑使用rem的哈，亲测有效
哈哈，厉害，亲测可行