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

相关推荐
街尾杂货店&16 小时前
css word属性
前端·css
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生2 天前
Css性能优化
前端·css
写代码的皮筏艇2 天前
CSS属性继承与特殊值
前端·css
我有一棵树2 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light602 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络2 天前
Vue3 原生移动应用开发来了
前端·javascript·css