【开发者问答】如何理解自适应单位 rpx 与 rem 的区别?

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
User avatar
Muzzzhi
Posts: 86

如题如题 :D :D :D

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM


Tags:
智能小程序开发者
Posts: 201

Re: 【开发者问答】如何理解自适应单位 rpx 与 rem 的区别?

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;
}

智能小程序开发者
Posts: 201

Re: 【开发者问答】如何理解自适应单位 rpx 与 rem 的区别?

楼主如果这个小程序希望横竖屏的时候展示的大小都是一样大的话就可以考虑使用rem的哈,亲测有效

User avatar
Muzzzhi
Posts: 86

Re: 【开发者问答】如何理解自适应单位 rpx 与 rem 的区别?

哈哈,厉害,亲测可行

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM

Post Reply