锐客网

  1. 首页 > it技术 > >

微信小程序|微信小程序 （布局适配与物理逻辑像素）

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等
关键词：
屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等
屏幕尺寸
屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
如何计算手机尺寸？
知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。
物理像素–UI设计师像素
物理像素/屏幕分辨率/物理分辨率：
屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
单位：px，即1px=1个像素点
比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素
注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的
重点：
UI----物理像素
前端—逻辑像素
面试题：
移动端的设计图是几倍图？
苹果6开发，设计师给的是2倍图，375逻辑像素，750设计师
逻辑像素/设备独立像素DIP—WEB
逻辑像素/设备独立像素
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
屏幕像素密度PPI
屏幕像素密度
每英寸屏幕所拥有的像素数，英文简称PPI
单位dpi
解析：
屏幕是由很多像素点组成的。平时说的分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点 组成的。每个点发出不同颜色的光，构成我们所看到的画面。
而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。
所以，这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。
1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
设备像素比DPR
设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。
Phone6—物理像素7501334，像素比DPR为2，逻辑像素375667
讲到这里可能有人会问像素还分物理和逻辑？这两个有啥区别？
其实在很久以前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1
但是后来事情起了变化，Retina视网膜技术使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多
像素比DRP
物理像素与逻辑像素之间比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。
微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

视网膜显示屏Retina
Retina：
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。简单理解为种新型高分辨率的显示标准。
这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
在Retina屏上，DPR不再是1，而是大于1
比如2（iPhone 5 6 7 8）
或者3（iPhone 6 Plus等一系列Plus）
viewport
viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。
倍率与逻辑像素
Retina屏幕把2×2个像素当1个像素使用。
比如原本44像素点高的顶部导航栏，在Retina屏上用了88个像素点的高度来显示。导致界面元素都变成2倍大小，效果和3gs一样，但画质却更清晰了。
倍率与逻辑像素
苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
物理像素与逻辑像素
CSS中的1px并不等于设备的1px
在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的，需要使用大约4个物理像素来显示一个CSS像素。
实现真正的1物理像素
当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
面试：iphone6—1px:2个物理像素----transform:scale(0.5)
eg：border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。为什么会出现比border-width:1px更细的边框？
实现真正的1物理像素
屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置
meta name=“viewport” content="width=device-width, initial-scale=0.5"
举个例子，iPhone 6的物理像素上面已经说了，是750*1334，那它的逻辑像素呢？
我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375*667，这就是它的逻辑像素，据此很容易计算出DRP为2。
还可以直接通过window.devicePixelRatio这个值来获取DRP，打印结果是2，符合我们的预期。
1px边框问题
在苹果的带动下，Retina技术在移动设备上已经成了标配，所以前端攻城狮必须直面如下事实：
想画个1px的下边框，没法像安卓或iOS的同时那样直接操纵物理像素点ui,这就是初级前端面试必考题之“1px边框问题”的由来。
最推崇的方法还是利用CSS3的transform: scale，因为简单直接、适用性和兼容性好。即transform: scale(0.5)
手机屏幕尺寸
微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

rpx适配
rpx是小程序中的尺寸单位，它有以下特征：
①小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
②1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px
由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。
WXSS尺寸单位
原理:
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

vw、vh适配
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
注意：所以，在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。
物理像素与逻辑像素小结：
工程师尺寸就是逻辑像素，设计师尺寸就是物理像素
微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

【微信小程序|微信小程序 （布局适配与物理逻辑像素）】微信小程序|微信小程序 （布局适配与物理逻辑像素）
文章图片

小程序编译后，rpx会做一次px换算
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。但是一般情况下，百分比+rpx就已经足够使用了,所以出场机会很少
二倍图：1个逻辑像素等于2个物理像素

    推荐阅读


    上一篇：微信小程序|微信小程序 （API---简介、运行机制及同步异步）

    下一篇：python高效编程|Python 3.6.5 -实现简单的历史记录查询功能