关于物理像素／逻辑像素

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

描述屏幕尺寸，通常从物理和逻辑两方面来，而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单位是相对于<html>根元素的字体大小的。只要我们能根据不同屏幕大小设置不同的根元素字体大小，那么间接地就实现了不同屏幕采用不同的物理像素值，这时候这个rem就有点像别人家的dp/pt了。

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

关于物理像素／逻辑像素相关推荐

CSS媒体查询-物理像素-逻辑像素
媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口. 你可以根据设备的类型(比如屏幕设备.打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面. 媒体查询的使 ...
微信小程序（布局适配与物理逻辑像素）
移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显示屏Retina.rpx ...
微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显 ...
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等如何计算手机尺寸? 知道手机屏幕的长和 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因. 1.PX(CSS pixels) 1.1 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport（转载）
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
物理像素，逻辑像素(pt)，css像素(px)，像素比(dpr)都是什么？px，em，rem等都是什么？有什么区别？
逻辑像素.物理像素.css像素.像素密度.像素比都是什么? (像素)分辨率:手机屏幕的实际像素尺寸. 像素密度(ppi -- 像素每英寸 (ps: dpi -- 点每英寸,一般针对于打印机等)):( ...
什么是物理像素与逻辑像素？
如果理解物理像素与逻辑像素的关系? 物理像素指的是设备的实际像素,这个主要由设备自身的硬件所决定,因此同一类型的设备物理像素是固定的. 逻辑像素(DPI) 逻辑像素是相对于物理像素之后提出的 ...

关于物理像素／逻辑像素

关于物理像素／逻辑像素相关推荐

最新文章

热门文章