WebKit Inside: px 与 pt

合集 - WebKit(12)

1.WebKist Inside: CSS 样式表的组成2023-10-01 2.WebKit Inside: DOM树的构建2022-02-21 3.WebKit中WTFMove实现2022-02-20 4.WebKit Inside: CSS 样式表解码字符集2023-09-30 5.CSS 样式表引入的3种方式2023-09-30 6.WebKit Inside: CSS 样式表的解析2023-10-02 7.WebKit Inside: CSS 样式表的匹配时机2023-10-05 8.WebKit Insie: Active 样式表2023-10-07 9.WebKit Inside: CSS 的匹配原理03-18

10. WebKit Inside: px 与 pt 03-23

11.WebKit Inside: 渲染树03-30 12.WebKit Inside: GPU 进程调试04-11

收起

前端CSS中的px是物理像素，还是逻辑像素？

它和iOS中的pt是怎样的关系？

下面我们就来看下CSS中的px实现。

假设有如下CSS字号设置:

   

       
div {

       
  font-size: 100px;

       
}

最终处理px的调用栈如下图所示:

从左边调用栈可知，这个过程发生在CSS的匹配。

详情可以参看《WebKit Inside: CSS 的匹配》。

从右下角红框输出可知，当前正在处理CSS中font-size属性值:100px。

从代码可以看到，如果是px，直接从switch-case语句中跳出，不做任何换算处理，属性值100被直接存储下来使用。

那么就可以得出结论，CSS 中的 px 是逻辑像素，等价于 iOS 中的 pt。

在CSS中，也有一个pt，那么它和iOS中的pt是什么关系呢？

还是上面的CSS字号设置，不同的是，将字号单位从px修改为pt:

   

       
div {

       
  font-size: 100pt;

       
}

最终处理pt的调用栈如下:

整个处理过程和px类似。

不同的地方在于，最终的值不是支持存储100，而是经过了转换。

转换的关键就是CSS::pixelsPerPt，从控制台的输出可以看到，这个值为1.3333。

通过在代码中搜索，CSS::pixelsPerPt定义在CSSUnits.h文件中:

从定义中看，CSS::pixelsPerPt由另外两个变量计算而来:

CSS::pixelsPerInch = 96

CSS::pointsPerInch = 72

CSS::pixelsPerInch表示一英寸有多少像素，这里的像素是物理像素。

CSS::pointsPerInch表示一英寸有多少点，这里的点是在打印时使用的单位。

CSS::pixelsPerPt就等于CSS::pixelsPerInch除以CSS::pointsPerInch。

那么可以得出结论，CSS 中的 pt 是打印时使用的单位，和 iOS 中的 pt 不是一回事。

原创作者: chaoguo1234 转载于: https://www.cnblogs.com/chaoguo1234/p/18788098