小程序学习-理解小程序中响应式单位rpx
微信小程序的官方文档用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的更多相关文章
- vue中响应式props办法
title: vue中响应式props办法 toc: false date: 2018-12-25 21:22:49 categories: Web tags: Vue 更新props数据时,使用th ...
- [转]响应式WEB设计学习(2)—视频能够做成响应式吗
原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- HTML5学习总结-番外05 响应式布局
1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
- 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
- 微信小程序学习笔记1--小程序的代码构成
最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...
- winform学习-----理解小概念-20160517
1.MouseDown事件 当鼠标指针位于控件上并按下鼠标键时发生. 2.MouseUp事件 当鼠标指针在控件上并释放鼠标按键时发生. 与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才 ...
- winform学习-----理解小概念-20160518
一.设置滚动,滚动列遮住内容的解决办法 1.datagridview三个属性:autosizecolumsmode none autosizeRowsmode none dock fill 2. ...
- css中响应式布局中样式的代码书写方法
代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...
随机推荐
- springcloud 入门 8 (config配置中心)
Spring Cloud Config: 配置中心为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件,它就是Spring Cloud Config. 在分布式系统中,由于服务数量巨多, ...
- (后端)Java中关于金额大小写的工具类
/** * 金额小数转换成中文大写金额 * * @author Neil Han * */ private static final String UNIT[] = { "万", ...
- [20171113]修改表结构删除列相关问题.txt
[20171113]修改表结构删除列相关问题.txt --//维护表结构删除字段一般都是先ALTER TABLE <table_name> SET UNUSED (<column_n ...
- Sql Server 增加字段、修改字段、修改类型、修改默认值
1.修改字段名: alter table 表名 rename column A to B 2.修改字段类型: alter table 表名 alter column 字段名 type not null ...
- MySQL 8.0 —— 数据字典
1.简介 MySQL 8.0 将数据库元信息都存放于InnoDB存储引擎表中,在之前版本的MySQL中,数据字典不仅仅存放于特定的存储引擎表中,还存放于元数据文件.非事务性存储引擎表中.本文将会介绍M ...
- linux E325: 注意 发现交换文件 "*.swp" 解决方法
今天在linux里修改脚本文件时,不小心非正常关闭了脚本文件,再次编辑时,每次都提示 如下错误: E325: 注意发现交换文件 ".bqh.sh.swp" 所有者: root 日期 ...
- php二维数组去重
php二维数组去重 前言:php一维数组去重很简单,直接array_unique($arr)即可,但是二维数组去重就得自己去写了 二维数组去重方法: /* * 二维数组去重 * 注意:二维数组中的元素 ...
- 【PAT】B1065 单身狗(25 分)
#include<stdio.h> #include<algorithm> #include<math.h> using namespace std; int ca ...
- ABP模块运行解析
从官方创建一份ASP.NET CORE 2.0的项目,并加入源码调试,可以看出如下图的加载顺序 1.ABP是通过什么样的机制加载的 既然ABP中模块需要添加DLL到引用中,又要加入DependsOn在 ...
- 什么是CPU密集型、IO密集型?
CPU密集型(CPU-bound) CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/ ...