编程 Javascript

微信小程序 rpx 尺寸单位详细介绍

Posted in Javascript onOctober 13, 2016

微信小程序最近火了，大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢，面对不同的手机屏幕，微信

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应,

微信小程序尺寸单位rpx以及样式

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0。

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx

注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

感谢大家阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 rpx 尺寸单位详细介绍

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript数组的使用

Mar 28 Javascript

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

Jun 10 Javascript

学习使用bootstrap的modal和carousel

Dec 09 Javascript

js遍历json的key和value的实例

Jan 22 Javascript

手机端转换rem适应

Apr 01 Javascript

基于jQuery实现瀑布流页面

Apr 11 jQuery

理解 Node.js 事件驱动机制的原理

Aug 16 Javascript

利用js编写网页进度条效果

Oct 08 Javascript

vue中如何创建多个ueditor实例教程

Nov 14 Javascript

详解在Node.js中发起HTTP请求的5种方法

Jan 10 Javascript

js实现中文实时时钟

Jan 15 Javascript

解决iView Table组件宽度只变大不变小的问题

Nov 13 Javascript

jquery实现图片切换代码

Oct 13 #Javascript

JavaScript和jQuery获取input框的绝对位置实现方法

Oct 13 #Javascript

微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

Oct 13 #Javascript

Javascript中this绑定的3种方法与比较

Oct 13 #Javascript

手机端实现Bootstrap简单图片轮播效果

Oct 13 #Javascript

jquery 实现轮播图详解及实例代码

Oct 12 #Javascript

ExtJS 4.2 Grid组件单元格合并的方法

Oct 12 #Javascript

You might like

PHP 和 MySQL 基础教程（四）

2006/10/09 PHP

PHP数组及条件,循环语句学习

2012/11/11 PHP

PHP读取xml方法介绍

2013/01/12 PHP

php对二维数组按指定键值key排序示例代码

2013/11/26 PHP

php中删除、清空session的方式总结

2015/10/09 PHP

PHP goto语句用法实例

2019/08/06 PHP

基于jQuery的试卷自动排版系统实现代码

2011/01/06 Javascript

由Javascript实现的页面日历

2011/11/04 Javascript

js 关于=+与+=日期函数使用说明(赋值运算符)

2011/11/15 Javascript

jQuery的显示和隐藏方法与css隐藏的样式对比

2013/10/18 Javascript

Js与下拉列表处理问题解决

2014/02/13 Javascript

JS实现自适应高度表单文本框的方法

2015/02/25 Javascript

AngularJS基础知识笔记之表格

2015/05/10 Javascript

浅谈window对象的scrollBy()方法

2015/07/15 Javascript

非常实用的12个jquery代码片段

2015/11/02 Javascript

浅析AngularJs HTTP响应拦截器

2015/12/28 Javascript

AngularJs Understanding Angular Templates

2016/09/02 Javascript

jQuery弹出遮罩层效果完整示例

2016/09/13 Javascript

JS中substring与substr的用法

2016/11/16 Javascript

js实现不提示直接关闭网页窗口

2017/03/30 Javascript

微信小程序中使用wxss加载图片并实现动画效果

2018/08/13 Javascript

Vue项目pdf(base64)转图片遇到的问题及解决方法

2018/10/19 Javascript

在vue中使用Base64转码的案例

2020/08/07 Javascript

[01:06]DOTA2隆重推出2016冬季勇士令状内含上海特级锦标赛互动指南

2016/02/17 DOTA

Python中使用tarfile压缩、解压tar归档文件示例

2015/04/05 Python

一道python走迷宫算法题

2018/01/22 Python

python代码实现逻辑回归logistic原理

2019/08/07 Python

如何使用Python脚本实现文件拷贝

2019/11/20 Python

重构Python代码的六个实例

2020/11/25 Python

CSS3中Animation属性的使用详解

2015/08/06 HTML / CSS

美国定制钻石订婚戒指：Ritani

2017/12/08 全球购物

机关工会开展学习雷锋活动总结

2014/03/01 职场文书

员工离职感谢信

2015/01/22 职场文书

爱护公物主题班会

2015/08/17 职场文书

小学教代会开幕词

2016/03/04 职场文书

instantclient客户端连接oracle数据库

2022/04/26 Oracle