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 不是一回事

相关推荐
卷Java14 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
proud121215 小时前
开源的 CSS 动画库
前端·css·开源
Filotimo_17 小时前
2.CSS3.(1).html
前端·css
华仔啊20 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
吃饺子不吃馅1 天前
AntV X6 核心插件帮你飞速创建画布
前端·css·svg
爱吃甜品的糯米团子1 天前
CSS图片背景属性
前端·css
Aoda1 天前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
前端Hardy1 天前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
我的写法有点潮1 天前
简单轻便的四个CSS动画库
前端·css·vue.js
今禾1 天前
深入解析CSS Grid布局:从入门到精通
前端·css·面试