Sketch 使用 macOS 坐标系,以点(显示点)为单位测量。 在 Sketch 中工作时,所有内容都以点为单位测量,包括文本图层。
什么是点(显示点)?
2010 年推出 Retina 显示屏后,Apple 将所有像素的 x 轴和 y 轴都减半。 一个像素现在是四个物理像素,而屏幕尺寸保持不变。 这使分辨率提高了两倍,通常写作 @2x。
分辨率的提高提高了文本的可读性,但这也意味着屏幕上的对象需要在像素方面大两倍才能以相同的大小显示。 选择的解决方案是从硬件中抽象出像素,并且一个像素不再是屏幕上的一个像素。 为了明确起见,像素就是点。

@1x 和 @2x 分辨率的图示。 在左侧,我们看到一个正方形代表一个像素,标记为 1pt = 1px。 在右侧,我们看到相同的正方形被分成四个大小相等的较小正方形。 标签显示 1pt = 2px。
显示器分为分辨率类别; 这表示将其分辨率相对于 2010 年之前常见的(72 ppi)进行缩放的因子。
这些类别是 @1x(无缩放)、@2x(像素加倍)、@3x(像素三倍)等。 Apple 设备始终为 @2x 或更高,iPhone 13 使用 @3x 显示屏。 Sketch 会自动以 Mac 上显示器使用的分辨率渲染画布。
这对我的设计有什么影响?
Sketch 中的一个点转换为 @1x 显示器上的单个物理像素,但它指的是 @2x 显示器上的四个物理像素。 由于所有内容都根据您的显示器进行缩放,包括 macOS 和 Sketch 本身,因此您在设计时不必注意这一点 — 事情只会看起来更好。
导出图层时,您可以设置 Sketch 导出画板的比例。 如果您导出资产或画板 @2x,则一个点将等于四个物理像素,因为 Sketch 将沿 x 轴和 y 轴将其加倍。 导出 @3x 将等于九个像素(3x3 物理像素),依此类推。
所有这些都在 Sketch 中显示的尺寸保持不变的情况下发生。 一个很好的例子是 iPhone 屏幕尺寸。 iPhone 13 的大小为 390 x 844 点,分辨率为 1170 x 2532 像素 — 它具有 @3x 显示屏。
在 Retina 显示器上为 @1x 显示屏设计
Sketch 将以您显示器的像素密度渲染您的画布。 在现代 Mac 上为具有非 Retina 像素密度(小于 @2x)的显示屏设计时,您将看到比用户更多的细节。 我们建议您打开 视图 > 画布 > 缩放时显示像素。 当您缩放到 100% 以外的任何内容时,Sketch 将以其实际 @1x 分辨率渲染您的设计。 如果您知道目标硬件的物理尺寸,请在 Sketch 中设置缩放级别,以便 Mac 显示器上的画板具有与目标硬件相同的大小 — 这不太可能是 100%。
点和 CSS
如果您从 Mac 上的 Sketch 或我们的 Web 应用复制 CSS 属性,它们将以 px(CSS 像素)为单位测量,其工作方式与 macOS 上的点相同。 Sketch 中 3pt 的边框等属性将导出为 CSS 中 3px 的边框。 CSS 中的 1px 是 Sketch 和 macOS 中的 1pt(点)。
您可以在 W3C 网站上的文章 CSS: em, px, pt cm, in… 中了解更多关于 CSS 像素的信息