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. 阿里云主机CentOS7设置远程连接MySQL数据库

    有一个困扰了我好久的问题,今天终于解决了. 看网上的答案只有一部分.今天把完整的发篇博客纪念一下下. 首先,连接阿里云主机并登录数据库, 1.添加一个Host mysql>select User ...

  2. meta 详解

    对meta标签用处的介绍,meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据.这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务. 组成 meta标签共有两个属性, ...

  3. 跟我学SpringCloud | 第六篇:Spring Cloud Config Github配置中心

    SpringCloud系列教程 | 第六篇:Spring Cloud Config Github配置中心 Springboot: 2.1.6.RELEASE SpringCloud: Greenwic ...

  4. 漫谈Redis分布式锁实现

    在Redis上,可以通过对key值的独占来实现分布式锁,表面上看,Redis可以简单快捷通过set key这一独占的方式来实现分布式锁,也有许多重复性轮子,但实际情况并非如此.总得来说,Redis实现 ...

  5. Analysis of requirement specification of parking management system

    Analysis of requirement specification of parking management system PURPOSE OF THE SYSTEM The parking ...

  6. springboot集成mockito与powermock

      mockito大家都比较熟悉了,存在或者不存在,都不要紧,mockito让你有一种只要一出手,就知道有没有的感觉.但是它也不是万能的,比如静态方法.私有方法,它就无能为力了.这是为什么呢?当然不是 ...

  7. spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRpcEnv

    在前面源码剖析介绍中,spark 源码分析之二 -- SparkContext 的初始化过程 中的SparkEnv和 spark 源码分析之四 -- TaskScheduler的创建和启动过程 中的C ...

  8. 2018.10.20 2018NOIP冲刺之酒厂选址

    题目传送门 明显能够看出有一个建图求路程的优化 然而发现10000*10000爆空间QAQ 为了做一些初始化方面的优化 我们发现了一个叫做前缀和的东西 可以在环上查到两个之间的最短距离 同时还要做一些 ...

  9. git简单使用-GitHub

    本文描述window下如何使用git工具,操作GitHub远程代码库 一,准备工作: 1,安装git工具,一路默认next安装即可,下载地址 2,注册账号或者创建厂库(已有忽略) 注册账号后,创建仓库 ...

  10. js常用设计模式实现(三)建造者模式

    创建型模式 创建型模式是对一个类的实例化过程进行了抽象,把对象的创建和对象的使用进行了分离 关于创建型模式,已经接近尾声了,还剩下建造者模式和原型模式,这一篇说一说建造者模式 建造者模式的定义 将一个 ...