小程序常见问题!小程序如何做页面适配?

前端之家收集整理的这篇文章主要介绍了小程序常见问题!小程序如何做页面适配?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序的设计当中我们经常对于它所提出的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物理像素。

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx 

写给微信小程序开发看:

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

猜你在找的微信小程序相关文章