探究px像素与pt磅,mm毫米之间的换算


像素作为图像的一种尺寸,只存在于电脑中,如同RGB色彩模式一样只存在于电脑中。像素是一种虚拟的单位,现实生活中是没有像素这个单位的。
在现实中我们看到一个人,你能说他有多少像素高吗?不能,通常我们会说他有1.82米高,或者182厘米等。所用的都是传统长度单位。传统长度单位就是指毫米、厘米、分米、米、公里、光年等单位。

DPI(dots per inch)

每英寸点数。在扫描打印时一般都有DPI可选。Windows 系统默认是 96dpiApple 系统默认是 72dpi

dpcm(dots per centimeter)

表示每厘米的点数。因为 1 英寸是 2.54 厘米,所以 1dpcm ≈ 2.54dpi

dppx(dots per px 别名为:x)

表示每 px 单位的点数。对应window.devicePixelRatio值。

px像素(Pixel)

相对长度单位。是一个虚拟的长度单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。

em

由于屏幕大小的差异性,相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的,于是就有了em 和 rem。

em是相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

由于浏览器的默认字体大小是 16px,所以未经调整默认字体大小的浏览器都符合: 1em = 16px。

em 会继承父级元素的字体大小。由此,只需要改变父元素的字体大小,就可以同步放大或缩小子元素的字体。

但是也因此需要注意几点:

  1. body 选择器中声明 Font-size=62.5% (10 ÷ 16 × 100% = 62.5%);
  2. 将你的原来的 px 数值除以 10,然后换上 em 作为单位;
  3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

rem (font size of the root element)

由于 em 存在对父元素继承的问题,当改变字体大小时涉及的继承关系就变得复杂起来。
rem 是相对于根元素字体尺寸的大小。如 文本大小设为 font-size: 10px,则 1rem = 10px。使用 rem 设置字体则简单了很多。

in英寸(Inch)

绝对长度单位。

pt磅(Point)

绝对长度单位。是一个物理长度单位,指的是72分之一英寸。
1in = 72pt

mm毫米(Millimeter)

绝对长度单位。
1in = 25.4 mm = 72pt

cm厘米(Centimeter)

绝对长度单位。
1in = 2.54cm = 72pt

pt与px换算公式

pt和px的换算公式可以根据pt的定义得出:
pt = 1/72(英寸), px = 1/dpi(英寸)
因此 pt = px * dpi / 72
以 Windows 下的 96dpi 来计算
pt = px * 96/72 = px * 4/3 = px * 1.33
基本上 1pt 约等于 1.33像素

mm与px换算公式

由pt = px * dpi / 72
则又知道1in = 25.4mm = 72pt
则25.4mm/72 = px * dpi / 72
得mm = px * dpi / 25.4
以 Windows 下的 96dpi 来计算
mm = px * 96 / 25.4
mm = px * 3.78
基本上 1毫米 约等于 3.78像素

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定栓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值