首页
学习
活动
专区
圈层
工具
发布

聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

前言 大家好,我是HoMeTown,顺着计量单位,想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。...这就涉及到设备像素、css像素、设备独立像素、dpr、ppi的概念。 css像素 css像素就是我们在进行开发时,经常使用的px单位。...由此可见,px会受到dpr(设备像素比)与ppi(每英寸像素比)的影响。...这种n个虚拟像素:n个物理像素比例式的换算,被统称为设备像素比,也就是dpr dpr(Device pixel ratio) 设备像素比,代表设备独立像素到设备像素的转换关系。...计算公式为: 总结 无缩放情况下,1px = 1dip 设备像素不会改变,但是设备虚拟像素会变 在移动端的标准屏下,1dip = 1dp dpr = dp / dip ppi越大,图像越清晰

1.8K40

如何用Java计算屏幕的PPI(每英寸像素数)

如何用Java计算屏幕的PPI(每英寸像素数) 引言 在现代电子设备中,屏幕的分辨率和显示效果是用户非常关注的一个指标。...PPI(Pixels Per Inch,每英寸像素数)是衡量屏幕显示精度的重要参数之一。PPI越高,屏幕显示的图像越细腻,视觉效果越好。...本文将详细介绍PPI的概念、计算方法,并通过Java代码实现PPI的计算,帮助读者深入理解这一技术指标。 什么是PPI? PPI(Pixels Per Inch)是指屏幕上每英寸所包含的像素数量。...开发适配 在移动应用或网页开发中,了解设备的PPI有助于优化界面设计,确保在不同设备上都能获得良好的显示效果。 如何计算PPI? PPI的计算公式基于勾股定理。...计算过程分为以下几步: 使用勾股定理计算屏幕对角线的像素数。 将对角线像素数除以屏幕对角线长度,得到PPI。 对PPI取整并返回。

43110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于屏幕像素抖动的PCF

    PCF无非就是把周围的像素加吧加吧, 然后取个平均值. 结果的平滑程度, 跟Kernel的大小有直接关系. 下面来对这个描过边的锯齿茶壶PCF一把: ? 2x2: ? 3x3: ? 4x4: ?...但大到一定程度效果就不明显了, 而且还要考虑性能问题, 毕竟多次的纹理采样很慢. 其实呢, 通过抖动也可以使用少量的采样达到近似比较大Kernel的效果....这里用4次采样来模拟4x4PCF的效果, 采样模板如下: ?...正好PS3.0中的增加了一个寄存器VPOS, 用于直接取当前像素的屏幕坐标, 根据坐标的奇偶性来决定取样的位置: sampler2D Texture0; float2 fInverseViewportDimensions...fInverseViewportDimensions); color *= 0.25; return color; } 最终效果, 用在阴影模糊中会很一种效率很高的解决方案

    1.2K20

    针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

    脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了,所以重新梳理了相关的知识,以备不时之需。   ...1.ppi   ppi指Pixels Per Inch也就是每英寸的像素点,此处的像素点就是物理像素点(也就是最小的显示单元)。...ppi描述的是像素的密度,满足以下公式 此图来源于uxabc 2.iPhone的pt与Android的dp   第一代iphone手机的像素密度是163ppi,但是到了iPhone4的时候像素密度是326ppi...同样Android开发者也遇到了同样的问题,google提出的解决方案是dp(Density-Independent Pixels),基准是160ppi下的1px代表的尺寸;   总之,pt和dp起着同样的作用...3.pt、dp与px之间的关系   根据上面的描述,我们可以知道iphone4下1pt=2px,因为iphone4是326ppi,正好是基准的两倍;但是iphone6+是401ppi,那在iphone6

    2.4K50

    移动应用界面设计的尺寸规范「建议收藏」

    像素(PX) 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。...对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。...(每英寸所能打印的点数,即打印精度) ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。...对于320ppi的屏幕,1dp x 320ppi/160= 2px。...(px=pt*ppi/72) iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍

    7.7K20

    理一理屏幕尺寸那些事

    ppi(Pixel Per Inch),即每英寸的像素。 我们刚才好像算了每毫米的像素数,那每英寸的像素数能难倒你吗?...---dpi称为打印精度 打印机将[彩色液体油墨]经喷嘴变成细小微粒喷到印纸上,一个颗粒代表1点 dpi的意思是每英寸墨滴点数,比如300dpi的意思就是每英寸墨滴的个数为300 用300个点表示一个硬币...ppi和dpi在Android Android又不是打印机,dpi和ppi等价,都是表示 1 in长度对应的px数 也许谷歌更倾向于用`点(dot)` 来表述屏幕像素,所以采用dpi的说法而不是...也并非屏幕真正的dpi(ppi),400的,402的都算是480, 所以dp的计算方式也是一个满足大众需要的约值,虽然有一定的效果,但并不能完美适配。...1,所以会遇到dp和sp混用无影响的情况。

    1.2K20

    杂篇:理一理屏幕尺寸那些事

    ppi(Pixel Per Inch),即每英寸的像素。 我们刚才好像算了每毫米的像素数,那每英寸的像素数能难倒你吗?...---dpi称为打印精度 打印机将[彩色液体油墨]经喷嘴变成细小微粒喷到印纸上,一个颗粒代表1点 dpi的意思是每英寸墨滴点数,比如300dpi的意思就是每英寸墨滴的个数为300 用300个点表示一个硬币...ppi和dpi在Android Android又不是打印机,dpi和ppi等价,都是表示 1 in长度对应的px数 也许谷歌更倾向于用`点(dot)` 来表述屏幕像素,所以采用dpi的说法而不是...,再乘以0.00625(即除以160) 而且这个DisplayMetrics.DENSITY_DEVICE也并非屏幕真正的dpi(ppi),400的,402的都算是480, 所以dp的计算方式也是一个满足大众需要的约值...,尽量用父去约束,不然跑出去了……可是大忌 尽量避免使用非常大的dp(200+),可通过控件间相对位置将过大的dp约束,因为数值越大不同手机的差异性越明显。

    1.3K30

    理一理屏幕尺寸那些事

    ppi(Pixel Per Inch),即每英寸的像素。 我们刚才好像算了每毫米的像素数,那每英寸的像素数能难倒你吗?...---dpi称为打印精度 打印机将[彩色液体油墨]经喷嘴变成细小微粒喷到印纸上,一个颗粒代表1点 dpi的意思是每英寸墨滴点数,比如300dpi的意思就是每英寸墨滴的个数为300 用300个点表示一个硬币...ppi和dpi在Android Android又不是打印机,dpi和ppi等价,都是表示 1 in长度对应的px数 也许谷歌更倾向于用`点(dot)` 来表述屏幕像素,所以采用dpi的说法而不是...也并非屏幕真正的dpi(ppi),400的,402的都算是480, 所以dp的计算方式也是一个满足大众需要的约值,虽然有一定的效果,但并不能完美适配。...1,所以会遇到dp和sp混用无影响的情况。

    1.2K20

    【总结】移动应用界面设计的尺寸设置及规范

    每英寸所能打印的点数,即打印精度) dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。...尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。 ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。...* dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。dp和px的换算公式 :dp*ppi/160 = px。...* 简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。 为什么要把sp和dp代替px?...(px=pt*ppi/72) iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍

    4.7K40

    S7-200 PPI升级以太网,兼容1500PLC、人机界面与Modbus RTU驱动

    随着智能制造需求的提升,企业需要对原有基于西门子S7-200 PLC的控制系统进行改造,实现与新建S7-1500 PLC系统的数据交互,同时保留原有HMI触摸屏连接,并接入多台ABB ACS580变频器...二、项目痛点分析通讯接口限制:S7-200 PLC仅有MPI/DP 9针接口,无法直接接入以太网网络系统共存需求:必须保留原有威纶通MT8071iE触摸屏的实时通讯协议多样性:需要同时处理PPI、MODBUS...Modbus TCP到Modbus RTU协议转换支持Web配置,参数设置灵活2....Plus以太网转换器的桥梁作用,我们成功实现了老旧S7-200 PLC无缝接入现代工业以太网多协议(PPI/MODBUS/PROFINET)的透明转换原有HMI系统的零影响保留变频器数据的稳定采集串口转以太网技术在此项目中发挥了核心作用...,以太网桥接器的多协议处理能力解决了系统兼容性问题,而以太网转换器的透明传输特性保障了通讯的可靠性。

    33000

    手机端web学习基础--from慕课网

    1 web基础知识 1.1 pixel移动开发像素知识  px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt:device independent pixels设备无关像素 dpr:devicePixelRatio...设备像素缩放比 计算公式: 1px = (dpr)2*dp 为什么iphone5是320px*568px?...-》 因为dpr=2,即 1px=4dp,对应到长度(纬度),边长为2的正方形,长度1px=2dp.那么iphone5d 640*1136对应到px单位就是:320*568 DPI:打印机每英寸可以喷的墨汁点...(印刷行业) PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度 目前,在计算机显示设备参数描述上,二者表达的是一样的。...计算公式:ppi = √(11362+6402)/4=326ppi(视网膜Retina屏)。注意:单位为硬件像素,非px. 可视度越低,系统默认设置缩放比越大。 ?

    1.1K50

    球体投影到像素空间的大小

    概述 需要说明的是,球体投影到像素空间的结果可能不是一个正圆,其半径或者直径大小只能估算而没有确定的值。...根据参考资料,球体投影到像素空间的半径的计算公式为: radius_{[clip\_space]} = radius * cot(fov / 2) / Z \tag{0} 其中radius是球体的半径...当然,由于最后得到的是裁剪空间的大小,需要换算到屏幕像素空间。 2. 详论 根据我的理解,这个公式也是近似的。本人通过参考文献得到的推导方式如下所示。...使用参考文章4中的插图: 球体投影到像素空间的半径其实就是h的像素长度。...此时,有: tan\theta = radius_{[clip\_space]} / z_{[clip\_space]} \tag{1} 球体被投影到裁剪空间: 由投影变换的性质可知: tan

    2.8K10

    第133天:移动端开发的一些总结

    iphone5分辨率640*1136 逻辑像素与物理像素的关系 px逻辑像素:浏览器使用的抽象单位 dp,pt物理像素:设备无关像素 dpr:设备像素缩放比 计算公式:1px = (dpr)^2 * dp...iphone5的 dpr = 2; DPI:打印机每英寸可以喷的墨汁点(印刷行业) PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度 目前,在计算机显示设备参数描述上,二者意思一致 计算公式:以iphone5...为例:ppi = √(1136^2 + 640^2)/4 = 326ppi(视网膜retina屏) 注意:单位为硬件像素(物理像素),非px PPI越高,像素数越高,图像越清晰。...一个300多像素的屏幕,放一个1000多像素的页面,会混乱,所以要先虚拟一个980像素的页面,然后进行缩放。...方案二:1px = 1dp,易解决高清问题 缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1px像素边框和高清图片都不需要额外处理。

    1.2K20

    双重标准? Retina屏科学原理

    在理论数据的基础上,考虑到环境光线对成像质量的影响,数据上通常取人眼的最小视角为 1 弧分度(1/60 度)。 ?...另外,需要说明的是,1 弧分度数据主要基于视力 20/20(等效于我们熟知的 1.0)的统计样本,视力超常的(如 2.0 的视力)个体无疑会有着更出色的视觉能力,能辨识外物的最小视角会更小。 ?...基于以上的数据,在人类的最小视角(α)为定值的前提下,在某个视距(d,即设备离人眼的距离),简单说,当屏幕的像素间距小于此时(视距一定)的临界像素间距(可根据图中的公式来计算),或者说屏幕的分辨率(ppi...也就是说,是否为 Retina 屏幕,不仅仅决定于 ppi(分辨率,或者说像素间距h;1英寸/像素间距h英寸=ppi),还要看使用设备时与人眼的距离(d) ?...新iPad究竟是不是Retina屏 关于视网膜屏幕的非官方问答 Android的计量单位px,in,mm,pt,dp,dip,sp Android 获取屏幕尺寸与密度

    2.8K30

    屏幕分辨率dpi计算_hypodensity

    所以光看屏幕的分辨率对于设计师来说是不具备多少实际意义的,通过分辨率计算得出的像素密度(PPI)才是设计师要关心的问题,我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。...我们知道该屏幕的横向物理尺寸为 2.3 英寸 ,且横向具有 750 颗像素,根据下面的公式,我们能够算出 iPhone(6~7)的屏幕是 326 PPI,意为每寸存在 326 颗像素。...其实不论我们怎么除,计算得出来的像素密度(PPI)都会是这个数,宽存在像素除以宽物理长度,高存在像素除以高物理长度,得数都接近于 326。...假设我们能将 iPhone 7 手机屏幕 PPI 调低 50% 变为 163,色块还是 326*326px,这个色块的物理尺寸会变成 2*2 英寸,同样多的像素,看起来却大了一倍。咦!这是为啥?...density : 其实是 DPI / (160像素/英寸) 后得到的值。是不是有点奇怪,因为我带了单位。。。这个涉及到后面一个比较重要的东西,后面再说。

    5.1K20

    Android之dp(相对大小) 和 px(像素)之间的相互转换

    dp和px dp px 转换代码 dp dp:安卓中的相对大小,dp就是为了使得开发者设置的长度能够根据不同屏幕的分辨率获得不同的像素(px)数量 (比如:将一个控件设置长度为10dp,那么在160dpi...上该控件长度为10px,在320dpi的屏幕上该控件的长度为320/160*10=20个像素点。...也就是说dp会随着不同屏幕而改变控件长度的像素数量。)...px px:像素点,平常所说的手机分辨率1080×1920只是像素数量,也就是1920px × 1080px,代表手机高度有1920个像素点,宽度有1080个像素点。...DensityUtil { /** * 根据手机的分辨率从 dp(相对大小) 的单位 转成为 px(像素) */ public static int dpToPx(Context

    6.7K10

    关于移动端适配,你必须要知道的

    在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等,你真的能分清这些概念的意义吗?...iOS的尺寸单位为 pt, Android的尺寸单位为 dp, ReactNative中没有指定明确的单位,它们其实都是设备独立像素 dp。...在使用 ReactNative开发 App时, UI给我们的原型图一般是基于 iphone6的像素给定的。...这时,1个 CSS像素就等于1个设备独立像素,而且我们也是基于理想视口来进行布局的,所以呈现出来的页面布局在各种设备上都能大致相似。...不同于位图的基于像素, SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 ?

    2.8K10
    领券