FWQ
在不同的移动设备上小程序应该如何设置rpx单位?
摘要: 我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用px的效果不太理想的情况。日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。但是在 … 我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位!那什么是RPX,应该如何设置呢?今天我们就来好好了解一下。 [color=rgb(44,]rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 说实话,一开始没看懂。rpx到底是个啥?又该如何理解“750rpx = 375px = 750物理像素”这句话呢? 开始之前,我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥? 【像素】:它不是自然界的物理长度,指基本原色素及其灰度的基本编码。 【物理像素】:它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。是不是有点眼熟?我们要记住物理像素指的是显示器上最小的点。 【设备独立像素】:它又称密度无关像素,划重点——密度无关,是计算机程序实际处理的虚拟像素(如css的px),由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比 【设备像素比】:设备像素比 =…