微信小程序的设计当中我们经常对于它所提出的rpx单位尺寸有点不理解,今天跟大家说说关于微信小程序的rpx尺寸单位与我们熟悉的px的换算方法。让你快速清楚的进行rpx换算px与px换算rpx结果来与开发工程师快速对接!
小程序如何做页面适配?
小程序提供了响应式单位rpx(responsive pixel),视觉稿单位是多少px,还原成小程序就写多少rpx;
这样对于设计师来说还是比较容易理解的,例如按我们常规的设计尺寸为750X1334 那在小程序里的输出尺寸则就为750rpx * 1334rpx
是不是一下子就明白了!
也可以读下最美UI网提供的的微信小程序rpx尺寸的细节解说!
微信小程序尺寸单位 rpx
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
写给微信小程序开发看:
rpx实际上就是系统级的rem(把页面按比例分割750份,1rpx=window.innerWidth/750),或者scale伸缩布局的width=750。也就是说,微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了,或者减少了scale伸缩布局不能开启gpu raster的问题。
通过rpx,大家只需要根据750的设计稿写代码即可,不必担心它在各个平台的适配情况,实际上在各个平台都会长得一样!
其他相关ui设计尺寸可以到栏目去查阅!
原文链接:https://www.f2er.com/weapp/1447.html