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

微信小程序的设计当中我们经常对于它所提出的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设计尺寸可以到栏目去查阅!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


在做微信小程序新版本的时候,如何提醒用户更新? 今天分享一个关于微信小程序发布新版本提示用户更新代码
本文小编为大家详细介绍“微信小程序如何设置字体样式”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序如何设置字体样式”文章能帮助大家解决疑惑...
这篇文章主要介绍了微信小程序picker选择器获取值的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序picker...
本篇内容介绍了“微信小程序选择器组件picker怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处...
本篇内容主要讲解“在微信小程序中怎么使用three.js”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在微信小程...
这篇文章主要讲解了“uni-app开发微信小程序之H5压缩上传图片的问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入...
      大家熟悉微信小程序查询地理经纬位置吗?晓得微信小程序查询地理经纬位置的操作吗?下文就带来了微信小程序查询地理经纬位置的操作教程,一起来看看吧
      今日就快来学习本文中微信小程序收款通知设置方法的操作过程吧,相信在以后的使用中一定会得心应手的
      当前使用微信小程序类软件的朋友越来越来多,那么若想知道wifi密码查看器官方版小程序的使用,该如何操作的呢?接下来分享关于wifi密码查看器官方版小程序的使用的操作步骤。
      相信许多网友对微信都熟悉的,手机必装的一款应用,那大家知道在微信小程序里手持弹幕玩法吗?下文小编就带来了微信手持弹幕玩法的简单教程,有需要的朋友一起来看看吧
      不少朋友都喜欢使用微信小程序软件,那么大家知道快速制作微信小程序方法的简单操作吗?若还不了解,就来学习学习制作微信小程序方法教程吧,10分钟就能搞定
      有些人在使用微信时,还不了解微信怎么制作二维码表白的操作,下面小编就讲解使用微信制作二维码表白的操作方法吧,单身朋友赶快Get起来吧
      不少朋友都喜欢使用微信小程序,那么大家清楚微信小程序可以直接玩斗地主游戏的操作吗?若还不了解,就来学习学习利用微信小程序玩斗地主游戏教程吧!
      现在用手机里小程序的人越来越多,各种生活小软件应有尽有,下面小编就给大家分享一波微信小程序,好看+好用+精致,希望给大家带来帮助。
      微信想必大家都很熟悉,它是现在最大的社交软件,大家或许不知道微信小程序里有个好物圈,那么今天小编就带大家学习微信好物圈的具体操作,希望能够帮助到大家呢
      大家知道如何利用微信小程序转换PDF文档吗?下文小编就带来了在利用微信小程序转换PDF文档的简单使用教程,一起来看看吧!
      微信小程序现在是越来越受大家欢迎,现在很多朋友都喜欢使用微信小程里的换算工具.不过部份朋友还不清楚小程序里换算工具使用方法,今天小编要为大家分享一个微信超强换算工具一起来看看吧!
      想必刚刚入手微信小程序的朋友,还不太了解微信成语猜猜看怎么进入,小编今天就带来关于微信小程序成语猜猜看打开方法的操作步骤,感兴趣的小伙伴们一起学习一下吧!
      有些用户在使用微信小程序时,还不了解微信小程序如何修改用户名称,下面小编就讲解修改微信小程序的名称的操作方法,有需要的小伙伴一起来学习吧,详细流程奉上
      当前互联网发展迅速,整个用户设备不断的在变化,生态也接连变化,所以可以这样说,智能小程序已经成为一个必然的选择。