关于物理像素/逻辑像素

简单说明一下上图 其实没啥关系:

描述屏幕尺寸,通常从物理和逻辑两方面来,而DPI(dot per inch) 这个密度单位可以说是连接了物理和逻辑,表示每英寸的点数;

这个dot点,是个抽象的概念,在不同的领域具化起来有所不同,比如打印印刷领域通常是打印机输出的最小墨点,而电脑屏幕显示领域则是最小的像素点(就是滴一滴水在屏幕上就能看见的那种小格子);PPI(pixel per inch)每英寸的像素点数,所以在讨论电脑屏幕显示时,dpi和ppi其实是一回事

ps:上面的dot是个抽象概念,但实际生活中常提到还有个point物理单位(点),这个是物理单位,1 in = 72pt,别混了。。。

再说回ppi, pixel per inch 这里的pixel就是物理像素点,拿我的手机举个例子,分辨率为1440 * 2560 ,这个分辨率1440 * 2560 就表示屏幕上有1440 * 2560个物理像素点;

假如隔壁老王手机分辨率是1080 * 1920,然后设计师给了一个1080 * 1920的设计稿和一堆切图,假设这堆切图中有个图标大小是144px * 144px,那么怎么才能让视觉上我和老王看到的图标是一样大的呢?直接写死114px肯定不行,那样我手机上看到的图标肯定比老王小

这个时候就得说下,物理像素,逻辑像素和倍率了,看这里window.devicePixelRatio

我们从安卓客户端的角度来看,我和老王的手机都是安卓,屏幕密度分别是xxxhdpi和xxhdpi的,倍率分别是4,3;逻辑像素等于物理像素除以倍率,算下,其实二者的逻辑像素是一样的,都是360 * 640,可见这个逻辑像素比例才是决定最终显示效果的;刚刚说的那个尺寸为144px * 144px的图标,就是说这图标有144 * 144个物理像素点,那么其逻辑像素就是48 * 48

对于安卓和iOS,都有自己的逻辑像素单位,分别是dp和pt(这里的pt可不是前文提到的pt),那iOS和安卓er写个48pt/dp就差不多啦,接下来支持多种屏幕显示就是系统的事了,据说大概有三种方案(系统根据屏幕密度扩展修改逻辑像素单位的值,或者将可绘制资源扩展到适当大小比如缩放位图,或者针对不同屏幕密度提供不同尺寸的位图资源)

可是对于前端er呢。。很开心没有这个所谓的逻辑像素单位。

那我们就只能自己搞出适配的一套东西来。 比如这里只说下rem,rem单位是相对于根元素的字体大小的。只要我们能根据不同屏幕大小设置不同的根元素字体大小,那么间接地就实现了不同屏幕采用不同的物理像素值,这时候这个rem就有点像别人家的dp/pt了。

转载于:https://juejin.im/post/5a5b07496fb9a01cb912dcb4

你可能感兴趣的:(关于物理像素/逻辑像素)