WebKit Inside: px 与 pt

前端CSS中的px是物理像素,还是逻辑像素?

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

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

假设有如下CSS字号设置:

css 复制代码
div {
  font-size: 100px;
}

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

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

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

从右下角红框输出可知,当前正在处理CSSfont-size属性值:100px

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

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

CSS中,也有一个pt,那么它和iOS中的pt是什么关系呢?

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

css 复制代码
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 不是一回事

相关推荐
Liudef062 小时前
2048小游戏实现
javascript·css·css3
小桥风满袖6 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku6 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心8 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢9 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister9 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE9 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
呆呆的心12 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
爱学习的小学渣13 小时前
Css: flex布局+趣味Demo
css
wuxuanok13 小时前
Web前端开发-HTML、CSS
前端·css·html