微信小程序的官方文档用rpx来做响应式布局单位!那什么是rpx,应该如何设置呢?今天我们就来好好了解一下。

【像素】:它不是自然界的物理长度,指基本原色素及其灰度的基本编码。

【物理像素】:它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。是不是有点眼熟?我们要记住物理像素指的是显示器上最小的点。单位pt。

【设备独立像素】:它又称密度无关像素,划重点——密度无关,是计算机程序实际处理的虚拟像素(如css的px)。单位px。

【设备像素比】:设备像素比 = 物理像素 / 设备独立像素,单位是dpr!

从图片上来看一下移动设备的分辨率和rpx的关系:

在不同的屏幕上(普通屏幕 、vs retina屏幕),css像素所呈现的大小(物理尺寸)是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下,1个css像素对应 2*2个物理像素(1:4)。

有了上面的做铺垫,我们知道了对于iPhone6 来说, 1rpx = 1物理像素,1rpx = 0.5px;

如果不是iPhone 6 呢?

1rpx = window.innerWidth/750。

1px = 1rpx * dpr。

使用rpx,x小程序会自动在不同的分辨率下进行转换。

小程序学习-理解小程序中响应式单位rpx的更多相关文章

  1. vue中响应式props办法

    title: vue中响应式props办法 toc: false date: 2018-12-25 21:22:49 categories: Web tags: Vue 更新props数据时,使用th ...

  2. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  3. Bootstrap学习笔记(8)--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  4. HTML5学习总结-番外05 响应式布局

    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...

  5. 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  6. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

  7. winform学习-----理解小概念-20160517

    1.MouseDown事件 当鼠标指针位于控件上并按下鼠标键时发生. 2.MouseUp事件 当鼠标指针在控件上并释放鼠标按键时发生. 与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才 ...

  8. winform学习-----理解小概念-20160518

    一.设置滚动,滚动列遮住内容的解决办法 1.datagridview三个属性:autosizecolumsmode none autosizeRowsmode   none dock  fill 2. ...

  9. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

随机推荐

  1. springcloud 入门 8 (config配置中心)

    Spring Cloud Config: 配置中心为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件,它就是Spring Cloud Config. 在分布式系统中,由于服务数量巨多, ...

  2. (后端)Java中关于金额大小写的工具类

    /** * 金额小数转换成中文大写金额 * * @author Neil Han * */ private static final String UNIT[] = { "万", ...

  3. [20171113]修改表结构删除列相关问题.txt

    [20171113]修改表结构删除列相关问题.txt --//维护表结构删除字段一般都是先ALTER TABLE <table_name> SET UNUSED (<column_n ...

  4. Sql Server 增加字段、修改字段、修改类型、修改默认值

    1.修改字段名: alter table 表名 rename column A to B 2.修改字段类型: alter table 表名 alter column 字段名 type not null ...

  5. MySQL 8.0 —— 数据字典

    1.简介 MySQL 8.0 将数据库元信息都存放于InnoDB存储引擎表中,在之前版本的MySQL中,数据字典不仅仅存放于特定的存储引擎表中,还存放于元数据文件.非事务性存储引擎表中.本文将会介绍M ...

  6. linux E325: 注意 发现交换文件 "*.swp" 解决方法

    今天在linux里修改脚本文件时,不小心非正常关闭了脚本文件,再次编辑时,每次都提示 如下错误: E325: 注意发现交换文件 ".bqh.sh.swp" 所有者: root 日期 ...

  7. php二维数组去重

    php二维数组去重 前言:php一维数组去重很简单,直接array_unique($arr)即可,但是二维数组去重就得自己去写了 二维数组去重方法: /* * 二维数组去重 * 注意:二维数组中的元素 ...

  8. 【PAT】B1065 单身狗(25 分)

    #include<stdio.h> #include<algorithm> #include<math.h> using namespace std; int ca ...

  9. ABP模块运行解析

    从官方创建一份ASP.NET CORE 2.0的项目,并加入源码调试,可以看出如下图的加载顺序 1.ABP是通过什么样的机制加载的 既然ABP中模块需要添加DLL到引用中,又要加入DependsOn在 ...

  10. 什么是CPU密集型、IO密集型?

    CPU密集型(CPU-bound) CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/ ...