相思资源网 Design By www.200059.com

前言

这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起

     微信小程序官方文档

     >web app变革之rem

     >rpx单位官方文档

     >rpx单位基础介绍

如果看完上面几篇文章,我们开始进入正题吧~~

一、rem的使用

1) js中导入下面这段代码

(function (doc, win) {
 var docEl = doc.documentElement,
 resizeEvt = 'orientationchange' in window "text-align: center">微信小程序中单位rpx和rem的使用
正常情况下rem的使用

二、rpx的使用

1)小程序中rpx与px的转换

例如:设计稿750px宽度

那么恭喜您,你ps上量出宽度是多少,那么你就定义多少rpx,也就是 1px = 1rpx

例如:设计稿640px宽度

那么很遗憾,你需要转换一下 1px = 750/640 rpx

微信小程序中单位rpx和rem的使用
小程序中rpx和px的转换

2)小程序中如何继续使用rem

例如:设计稿750px宽度

此时1rem = (750/20)rpx = 37.5px

例如:设计稿640px宽度

此时1rem = (750/20)rpx = 32px

微信小程序中单位rpx和rem的使用
小程序中rem的使用

注意:无论设计稿多少,rem与rpx换算总是一样的,但是rem与px在小程序中换算是 rem = 设计稿宽/20,这一点与我们平时使用的rem完全不一样。

总结

小程序毕竟出来不久,以上言论有的属于官方文档,有的属于自己瞎捉摸,大家不能全信,要自己测了才知道。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

标签:
微信小程序,rpx,布局,微信小程序,rpx,rpx,rem单位

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序中单位rpx和rem的使用”

暂无微信小程序中单位rpx和rem的使用的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。