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

来源:互联网 发布:手机dns优化apk 编辑:程序博客网 时间:2024/03/29 21:56
原作者: 小小小    来自:授权地址

本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起:

微信小程序官方文档
web app变革之rem
rpx单位官方文档
rpx单位基础介绍

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

一、rem的使用

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

(function (doc, win) {      var docEl = doc.documentElement,        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',        recalc = function () {          var clientWidth = docEl.clientWidth;          if (!clientWidth) return;          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';        };      if (!doc.addEventListener) return;      win.addEventListener(resizeEvt, recalc, false);      doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

2) 根据设计稿宽度算出rem和px直接的转换公式

例如:
640px的设计稿,转换公式就是按照上面js中这句而来【docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'】,最终 1rem = 20 x 640/320 + 'px' = 40px;

3)根据设计稿按照1rem = 40px 对着各个元素进行单位转换

例如:
我们测量一个元素宽度是400px,那么最终css中这样写 width:400/40 = 10rem

正常情况下rem的使用

二、rpx的使用

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

例如:设计稿750px宽度
那么恭喜您,你ps上量出宽度是多少,那么你就定义多少rpx,也就是 1px = 1rpx

例如:设计稿640px宽度
那么很遗憾,你需要转换一下 1px = 750/640 rpx

小程序中rpx和px的转换

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

例如:设计稿750px宽度
此时1rem = (750/20)rpx = 37.5px

例如:设计稿640px宽度
此时1rem = (750/20)rpx = 32px

小程序中rem的使用

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

小程序毕竟出来不久,以上言论有的属于官方文档,有的属于自己瞎捉摸,大家不能全信,要自己测了才知道~~



0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 个人医保卡欠费怎么办 医保欠费不想交怎么办 怀化市驾考绿色通道怎么办? 签注易不能办理怎么办 网上怎么办护照和签证 意大利被偷护照怎么办 户口在学校 怎么办签证 户口换了身份证怎么办 广州在校大学生怎么办护照 民间借贷无法还怎么办 退伍档案没接收怎么办 档案被单位扣住怎么办 公积金提不出来怎么办 公积金还贷款怎么办手续 科一预约失败怎么办 科四忘记预约怎么办 我科目一缺考了怎么办? 无可选考试场地怎么办 早产儿脑部发育不好怎么办 宝宝脑部发育不好怎么办 小孩脑部发育不好怎么办 8岁儿童智力低下怎么办 儿童食物不耐受怎么办 忘记就诊卡号怎么办 nt检查预约不到怎么办 听力不好科目三怎么办 青岛公安不立案怎么办 长春驾照丢了怎么办 驾照超期一个月怎么办 太原暂住证丢了怎么办 太原居住证丢了怎么办 太原自行车丢了怎么办 太原身份证丢了怎么办 在太原健康证怎么办 学车体检色盲怎么办 驾照到期有色弱怎么办 入户体检备孕怎么办 去驾校体检散光怎么办 报考警校视力不合格怎么办 违章网上扣分怎么办呢 毓婷避孕后怀孕怎么办