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

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

设备 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 =37.5rpx;

注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,单位换算相对简单。

微信小程序的尺寸单位rpx介绍的更多相关文章

  1. 微信小程序-01-项目组成文件介绍（入门篇）

    自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚步或许会更有动力,我的 ...

  2. 微信小程序中的单位

    vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单 ...

  3. 关于微信小程序的尺寸关系

    在微信小程序开发中,大家尽量使用rpx为单位, px实际上就是系统级的rem(把页面按比例分割750份,1rpx=window.innerWidth/750),或者scale伸缩布局的width=75 ...

  4. 微信小程序产品定位及功能介绍

    产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...

  5. 微信小程序目录结构与配置介绍

    一.小程序结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 官网 1.1 ...

  6. 微信小程序结构目录、配置介绍、视图层(数据绑定，运算，列表渲染，条件渲染)

    目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...

  7. 微信小程序开发——全局配置详细介绍

    本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混 ...

  8. 微信小程序中的app文件介绍

    [app] 一.app.json 1.对当前小程序的全局配置 2.页面路径.界面表现.网络超时时间.底部 tab 等 { "pages":[ "pages/index/i ...

  9. 微信小程序开发-rem转换rpx小工具

    实现原理: 对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6], 除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾 ...

随机推荐

  1. spring boot 2.x 系列 —— spring boot 整合 RabbitMQ

    文章目录 一. 项目结构说明 二.关键依赖 三.公共模块(rabbitmq-common) 四.服务消费者(rabbitmq-consumer) 4.1 消息消费者配置 4.2 使用注解@Rabbit ...

  2. 【疑难杂症】windows下如何有效重装印象笔记

    重装这么简单的操作还用得着写篇文章吗??emmmm,言之有理,简单的重装就是卸载后重新下载最新的安装包然后安装就完事了,这里说的肯定是不简单的重装[滑稽]. 背景是这样的,之前在mac上对印象笔记的笔 ...

  3. 深入理解Java虚拟机笔记——虚拟机类加载机制

    目录 概述 动态加载和动态连接 类加载的时机 类的生命周期 被动引用 例子一(调用子类继承父类的字段) 例子二(数组) 例子三(静态常量) 类加载的过程 加载 验证 准备 解析 符号引用 直接引用 初 ...

  4. BZOJ 2460：元素（贪心+线性基）

    题目链接 题意 中文题意 思路 线性基学习 题目要求选价值最大的并且这些数异或后不为0,可以考虑线性基的性质:线性基的任意一个非空集合XOR之和不会为0.那么就可以贪心地对价值从大到小排序,加入线性基 ...

  5. Python之Pandas库学习（二）：数据读写

    1. I/O API工具 读取函数 写入函数 read_csv to_csv read_excel to_excel read_hdf to_hdf read_sql to_sql read_json ...

  6. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  7. C++智能指针的几种用法

    auto在c++11中已经弃用. 一.auto_ptr模板 auto_ptr与shared_ptr.unique_ptr都定义了类似指针的对象,可以将new到的地址赋给这一对象,当智能指针过期时,析构 ...

  8. C语言学习书籍推荐《明解C语言》下载

    柴田望洋 (作者), 管杰 (译者), 罗勇 (译者) <明解C语言>是日本的C语言经典教材,自出版以来不断重印.修订,被誉为“C语言圣经”.作者在日本IT界家喻户晓,出版过一系列极富影响 ...

  9. Node.js热部署代码，实现修改代码后自动重启服务方便实时调试

    写PHP等脚本语言的时候,已经习惯了修改完代码直接打开浏览器去查看最新的效果.而Node.js 只有在第一次引用时才会去解析脚本文件,以后都会直接访问内存,避免重复载入,这种设计虽然有利于提高性能,却 ...

  10. Centos7.4 的yum源库配置。

    http://mirrors.163.com/.help/centos.html https://www.cnblogs.com/mchina/archive/2013/01/04/2842275.h ...