基本概念
显示相关
- dip
设备独立像素(density-independent pixel, dip)也叫逻辑分辨率,是一种可以被程序所控制的虚拟像素,在Web开发中对应CSS像素。
- pp
物理像素(physical pixel, PP)也叫设备像素,由设备的屏幕决定,其实就是屏幕中控制显示的最小单位。例如,华为荣耀V20的屏幕显示分辨率2310*1080即为物理像素。
- dpr
设备像素比(device pixel ratio,dpr)计算公式如下:
$$dpr=物理像素/设备独立像素$$
这条公式成立的前提是,缩放比Scale为1,原因下面讲到缩放的时候就会知道。根据这种关系,如果设备像素大于设备独立像素(DPR大于1的设备,我们常说的高清屏或者视网膜Retina屏),就会出现一个设备独立像素对应多个设备像素的情况。
在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr,但遗憾的是并不是所有的都支持。
通过访问mydevice,可获得各类显示屏的dpr、dpi等参数信息。 例如,通过访问该网站可知华为荣耀V20的dpr为3。
- rpx
微信小程序对于rem的一种应用规定,官方规定屏幕宽度为20rem,规定屏幕宽为750rpx,因此微信中1rem=750/20rpx,iphone6下,1px=1rpx=0.5pt,使用rpx作为单位,微信小程序会自动在不同的分辨率下进行转换,而使用px为单位不会转换,iphone6p下1px=0.6rpx;
- rem
在移动端做适配通常用rem作为单位,rem是根据html的fontsize去动态计算实际px;
- pt
pt是逻辑分辨率,pt的大小和屏幕尺寸有关系,简单可以理解为长度和视觉单位;1个pt可以有1个px,也可以有2个,3个或更多的px,但人的视网膜极限为2倍@2x,增加再多也不会让屏幕看起来更加好了,比如iphone6,2个px构成一个pt,ip6以物理像素750*1334这视觉稿进行设计;
自定义组件
参考链接
- px、rpx、rem、pt、dpr学习笔记,by puxiaotaoc.
- 不要再问我移动适配的问题了,by 写Bug.
- 微信小程序日期时间选择器以及组件封装,by 大专栏.
- 微信小程序template模板与component组件的区别及使用方法,by 小破孩呦.
- 小程序app.js中onLaunch和主页的onLoad方法问题,by Feebas.
- 微信小程序分享参数传递(微信小程序获取分享path参数),by longlongValue.
- 微信小程序(四):通过list列表跳转详情页,by 扎哈的信徒.
- 2.2 WXML 模板,by 微信开放社区.
- 微信小程序-表单验证(WxValidate使用),by chibimarukochan.
- JS数组的深浅拷贝,by 蜗牛-.
- js正则校验数字和字母字符串,by hacker_LeeFei.
- 微信小程序onLaunch异步,首页 onLoad 先执行 ?,by juejing.
- 解决微信小程序 app onLaunch异步请求,在没有请求执行完就加载首页了的问题,by admin.
- 微信小程序canvas尺寸设置,by 楠倏之语.
- WeUI组件库快速上手,by weixin.