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


Posted in Javascript onDecember 06, 2016

前言

这篇文章主要给大家讲解了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

微信小程序中单位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完全不一样。

总结

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

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
JavaScript定时器实现的原理分析
Dec 06 #Javascript
原生js实现弹出层登录拖拽功能
Dec 05 #Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 #Javascript
原生js编写基于面向对象的分页组件
Dec 05 #Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 #Javascript
浅谈Node.js:Buffer模块
Dec 05 #Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 #Javascript
You might like
PHP程序员编程注意事项
2008/04/10 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
vue 组件简介
2020/07/31 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Django rest framework基本介绍与代码示例
2018/01/26 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
django迁移文件migrations的实现
2020/03/31 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
写一个方法1000的阶乘
2012/11/21 面试题
中学生自我评价范文
2014/02/08 职场文书
庆祝儿童节标语
2014/10/09 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
治庸问责工作总结
2015/08/11 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL