这篇文章将为大家详细讲解有关在不同的移动设备上小程序应该怎么设置rpx单位,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<>强摘要:我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem,他们来做响应式布局的像素单位,他们都是相对单位.rem相对于文档的根元素,em相对于父元素。但是在……
我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem,他们来做响应式布局的像素单位,他们都是相对单位.rem相对于文档的根元素,em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位!那什么是rpx,应该如何设置呢?今天我们就来好好了解一下。
[颜色=rgb(44岁)
rpx(反应像素):可以根据屏幕宽度进行自适应。规定屏幕宽为750 rpx。如在iPhone6上,屏幕宽度为375 PX,共750个有物理像素,则750 rpx=375 PX=750物理像素,1 rpx=0.5 PX=1物理像素。
说实话,一开始没看懂.rpx到底是个啥?又该如何理解“750 rpx=375 PX=750物理像素”这句话呢?
开始之前,我们先扯一扯像素,物理长度,设备独立像素,设备独立像素比都是些啥?
【像素】:它不是自然界的物理长度,指基本原色素及其灰度的基本编码。
【物理像素】:它是显示器(电脑,手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。是不是有点眼熟?我们要记住物理像素指的是显示器上最小的点。
【设备独立像素】:它又称密度无关像素,划重点——密度无关,是计算机程序实际处理的虚拟像素(如css的PX),由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比
【设备像素比】:设备像素比=物理像素/设备独立像素,单位是dpr !
还是没有看懂?没有关系,我们从图片上来看一下移动设备的分辨率和rpx的关系:
以iPhone6为例:
已知,1。设备宽高375 * 667,在这里我们可以看做是css中的px(密度无关像素);2。视网膜屏幕的dpr为2 .
求iPhone6的物理像素是多少吗?
送分题啊,同学们!
根据公式,我们计算出iPhone 6的物理像素为750 * 1334
结论:
在不同的屏幕上(普通屏幕vs视网膜屏幕),css像素所呈现的大小(物理尺寸)是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下,1个css像素对应1个物理像素(1:1)。在视网膜屏幕下,1个css像素对应2 * 2个物理像素(1:4)。
【位图像素】:一个位图像素是栅格图像(如:png、jpg、gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。觉得复杂?你只需要记住1 px表示一个图片最小的点。不信?我们来用PS放大一张图片,可以看到图片被拆分成无数个点,但无论你如何放大那些小点,他们都不能再次被拆分了,因为他们已经是像素级别的点了,已经是最小的了。
理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。
所以,在宽高375 * 667,dpr为2的iPhone 6中完美显示200 * 300像素(css) img标签,图片的尺寸应该为多少呢?答案是:400 * 600。
这就是我们针对iPhone 6的设计稿的尺寸基于750 * 1334来设计的目的了。
回到正题.......rpx是啥?
有了上面的做铺垫,我们知道了对于iPhone6来说,1 rpx=1物理像素,1 rpx=0.5 px;
如果不是iPhone 6呢?
1 rpx=窗口。innerWidth/750 .
1 px=1 rpx * dpr。
2。样式导入
使用@ import语句可以导入外联样式表,@ import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
[AppleScript]
3。内联样式
在不同的移动设备上小程序应该怎么设置rpx单位
