一、背景

css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素

这会造成一种错觉,我们会认为css中的像素就是设备的物理像素

但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的

当我们做移动端开发时,同为1px的设置,在不同分辨率的移动设备上显示效果却有很大差异

这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念

二、介绍

CSS像素

CSS像素(css pixel, px): 适用于web编程,在 CSS 中以 px 为后缀,是一个长度单位

在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位

px是一个相对单位,相对的是设备像素(device pixel)

一般情况,页面缩放比为1,1个CSS像素等于1个设备独立像素

CSS像素又具有两个方面的相对性:

  • 在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率)
  • 在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(比如两个不同型号的手机)

在页面进行缩放操作也会 引起csspx的变化,假设页面放大一倍,原来的 1px 的东西变成 2px,在实际宽度不变的情况下1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素)

假设原来需要 320px 才能填满的宽度现在只需要 160px

px会受到下面的因素的影响而变化:

  • 每英寸像素(PPI)
  • 设备像素比(DPR)

设备像素

设备像素(device pixels),又称为物理像素

指设备能控制显示的最小物理单位,不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个“点”而已

可以参考公园里的景观变色彩灯,一个彩灯(物理像素)由红、蓝、绿小灯组成,三盏小灯不同的亮度混合出各种色彩

从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,单位为pt

设备独立像素

设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素

javaScript中可以通过window.screen.width/ window.screen.height 查看

比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏,我们把它调为 1440x900”,这里的“分辨率”(非严谨说法)指的就是设备独立像素

一个设备独立像素里可能包含1个或者多个物理像素点,包含的越多则屏幕看起来越清晰

至于为什么出现设备独立像素这种虚拟像素单位概念,下面举个例子:

iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸,但 iPhone 3GS 的分辨率是 320x480,iPhone 4/4s 的分辨率是 640x960

这意味着,iPhone 3GS 有 320 个物理像素,iPhone 4/4s 有 640 个物理像素

如果我们按照真实的物理像素进行布局,比如说我们按照 320 物理像素进行布局,到了 640 物理像素的手机上就会有一半的空白,为了避免这种问题,就产生了虚拟像素单位

我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素,只是在 iPhone 3GS 上,最终 1 个虚拟像素换算成 1 个物理像素,在 iphone 4s 中,1 个虚拟像素最终换算成 2 个物理像素

至于 1 个虚拟像素被换算成几个物理像素,这个数值我们称之为设备像素比,也就是下面介绍的dpr

dpr

dpr(device pixel ratio),设备像素比,代表设备独立像素到设备像素的转换关系,在JavaScript中可以通过 window.devicePixelRatio 获取

计算公式如下:

图片

当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素

当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素

当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素

如下图所示:

dpr为3,那么1pxCSS像素宽度对应3px的物理像素的宽度,1px的CSS像素高度对应3px的物理像素高度

ppi

ppi (pixel per inch),每英寸像素,表示每英寸所包含的像素点数目,更确切的说法应该是像素密度。数值越高,说明屏幕能以更高密度显示图像

计算公式如下:

三、总结

无缩放情况下,1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变,而设备独立像素是一个虚拟单位会发生改变

PC端中,1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下)

在移动端中,标准屏幕(160ppi)下 1个设备独立像素 = 1个设备像素

设备像素比(dpr) = 设备像素 / 设备独立像素

每英寸像素(ppi),值越大,图像越清晰

参考文献

  • https://mp.weixin.qq.com/s/kQ32ujsmud5E_B4fMXRZNg

设备像素、css像素、设备独立像素、dpr、ppi 之间的区别的更多相关文章

  1. CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  2. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

  3. CSS像素、设备独立像素、设备像素之间关系

    CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程 ...

  4. 设备像素,CSS像素,设备独立像素

    1.概念 设备像素(device pixel)简写DP 设备像素又称 **物理像素** ,是设备能控制显示的最小单位,我们可以把它看做显示器上的一个点.我们常说的 1920x1080像素分辨率就是用的 ...

  5. 理解设备像素、设备独立像素、css像素、viewport

    设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...

  6. Win2D 官方文章系列翻译 - DPI (每英寸点数)和 DIPs(设备独立像素)

    本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-dpi-dips/ 本文旨在解释物理像素与设备独立像素(DIPs, device independent pi ...

  7. 【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

    . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...

  8. Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

    . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...

  9. 物理像素[设备像素] & 逻辑像素[CSS像素];

    为什么移动端CSS里面写了1px,实际上看起来比1px粗 了解设备物理像素和逻辑像素的同学应该很容易理解,其实这两个px的含义其实是不一样的, UI设计师要求的1px是指设备的物理像素1px,而CSS ...

  10. 移动端1px像素解决方式,从1px像素问题剖析像素及viewport

    在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较 ...

随机推荐

  1. 使用 ASP.NET Core MVC 创建 Web API 系列文章目录

    使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使用 ASP.NET Core MVC 创建 Web API(三 ...

  2. springboot发送邮件的几种方式

    准备工作(以QQ邮箱为例) SMTP 协议全称为 Simple Mail Transfer Protocol,译作简单邮件传输协议,它定义了邮件客户端软件与 SMTP 服务器之间,以及 SMTP 服务 ...

  3. Set-Alias navi ./navi.bat - 设置别名 - powershell入门 (后期改方案了,换npm script)

    需求 开机要启动好几个服务,原先都用vscode启动,觉得可能比较占内存,所以改成命令行 发现直接运行bat,需要输入./batName.bat 一次还行,天天输入就麻烦了 命令 Set-Alias ...

  4. 跨域! dev: 'http://192.168.40.81:9090/xxx-api/' 平台和项目 两个都要改 要不会跨域!跨域!跨域!

    跨域! dev: 'http://192.168.40.81:9090/xxx-api/' 平台和项目 两个都要改 要不会跨域!跨域!跨域!

  5. 一个简易的ORM框架的实现(一)

    一个简易的ORM框架的实现 ORM ORM---操作数据库---对象关系映射 ORM(Object Relational Mapping)框架采用元数据来描述对象与关系映射的细节.只要提供了持久化类与 ...

  6. java的内存模型认识

    参考,欢迎点击原文:https://www.bilibili.com/video/BV1CW411U726(B站) https://www.bilibili.com/video/BV12t411u72 ...

  7. JNI中AttachCurrentThread和DetachCurrentThread的问题

    在<Java与CC++交互JNI编程>中有讲过AttachCurrentThread和DetachCurrentThread的使用. 我们知道在jni中我们可以使用pthread或者std ...

  8. python面向对象(选课系统)

    一.需求分析(课程与班级合为一体) -管理员视图 -1.注册 -2.登录 -3.创建学校 -4.创建课程(先选择学校) -5.创建讲师 -学员视图 -1.注册 -2.登录功能 -3.选择校区 -4.选 ...

  9. iis管理器界面打不开

    iis管理器界面打不开 图形界面打不开 服务正常运行 开始->运行->输入以下重置下 inetmgr.exe /reset

  10. 摄影系列:李涛ps视频教程笔记

    四种颜色模式: HSB:人眼的识别. RGB:基于光.(RGB自然三原色,三个最大值,得出白色,所以RGB为加色模式) CMY:基于印刷.(青.品.黄印刷三原色,三个最大值,得出黑色,所以CMY为减色 ...