微信小程序中单位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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
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来自动调用不同服务器上的flash
2006/10/09 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
php fread函数使用方法总结
2019/05/28 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
初学Python函数的笔记整理
2015/04/07 Python
python函数形参用法实例分析
2015/08/04 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python统计字符的个数代码实例
2020/02/07 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python