dp - sp 与 PX 的关系

Posted 2023-02-22

【中文标题】dp - sp 与 PX 的关系

【英文标题】：Relation between dp - sp and PX

【发布时间】：2014-08-21 13:07:39

【问题描述】：

我不是在问 dp、sp 和 px 之间有什么区别。

我正在设计一个基于谷歌新材料设计的网站，所有测量值都在 dp（用于网格）和 sp（用于文本）中。我的问题是它们如何转化为像素。我已经设计网站超过 4 年，所有的测量值（网格和字体）都以像素为单位。

例如：

一个标题是24sp，它等于多少像素？ （它不是 24px，我试过匹配它们，大约是 28px，但必须有一个标准的测量系统。 网格指南：“所有组件都对齐到 8 dp 方形基线网格。” - 它等于多少像素？

1px = ?dp =?sp 在桌面或任何普通显示器或移动设备上？

【参考方案1】：

我建议阅读 Google 对 dp 和 sp 的定义，这可以在 android 文档here 和 here 中找到。

精彩的Designer's Guide to DPI也有一些有用的信息。

【讨论】：

@War10ck 谢谢。固定。

【参考方案2】：

我认为答案是：

1px = 1dp = 1sp 在任何普通显示器或移动设备上。

我是怎么想到这个的？

因为一个像素就是一个像素，对于安卓来说，dp 和 sp 被使用，因为它们用于必须缩放的本机应用程序，并且每个屏幕的 dpi 因设备而异。对于台式机，所有这些都是相同的，当然，网站必须兼容/响应移动设备，但由于网站在浏览器中加载，一些额外的媒体查询（基于指南）将完成这项工作。

如果有人有其他合乎逻辑的结论，请分享

【参考方案3】：

一个安全的经验法则是使用 1 px = 1 dp。

这应该可以为您在几乎任何设备上提供良好的安全尺寸。它在某些设备上会显得有点大，尤其是 iPad（常规）。

原因如下：

"A dp 对应于 160 dpi 像素的物理尺寸" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

160 dpi 表示：

160 点 = 1 英寸

因此：

160 dp = 1 英寸（25.4 毫米）

因此，当 Google 建议按钮的可触摸目标高度为 48 dp 时，他们是在说它们需要 0.3 英寸（7.6 毫米）高。

那么这是多少像素？嗯，这取决于设备。

48 dp (7.6 mm) 按钮高度示例：

iPad mini：48 像素 原因： iPad mini 屏幕大约 120 毫米宽，使用 768 像素来填充该空间。因此，您需要 162 像素来占用一英寸（25.4 毫米），或 48 像素来占用 7.6 毫米的按钮高度。

Kindle Fire (7")：43 像素

Kindle Fire (6")：50 像素

iPhone：48 像素

Nexus 7：48 像素

普通 iPad：39 像素

（我可能稍微捏造了四舍五入。我喜欢 48 比 49 好！）

以屏幕 mm 和 CSS px 宽度为例：我使用 CSS px 屏幕尺寸和对角线长度计算了屏幕宽度。

iPad mini：1024 x 768 分辨率和 201 毫米对角线 = 120 毫米宽。 Kindle Fire 7"：858 x 533 分辨率和 178 毫米对角线 = 94 毫米宽。 Kindle Fire 6"：853 x 533 分辨率和 152 毫米对角线 = 81 毫米宽。 iPhone：568 x 320 分辨率和 102 毫米对角线 = 50 毫米宽。 Nexus 7：960 * 600 分辨率和 178 毫米对角线 = 94 毫米宽。 iPad 常规：1024 x 768 分辨率和 246 毫米对角线 = 148 毫米宽。

请注意，要计算按钮的 px 高度，您需要使用设备 CSS px 尺寸。这些数字不一定与规格中所述的分辨率相同。

【参考方案4】：

对于大多数用例来说，所有这些都大致相同。

Source

要在不同密度的屏幕上保持 UI 的可见尺寸，您必须使用与密度无关的像素 (dp) 作为度量单位来设计 UI。一 dp 是一个虚拟像素单位，大致等于中等密度屏幕（160dpi；“基线”密度）上的一个像素。 Android 将此值转换为适合彼此密度的实际像素数。

例如，考虑图 1 中的两个设备。如果您将视图定义为“100 像素”宽，它会在左侧的设备上显得更大。因此，您必须改用“100dp”来确保它在两个屏幕上显示的尺寸相同。

但是，在定义文本大小时，您应该使用可缩放像素 (sp) 作为单位（但不要使用 sp 作为布局大小）。默认情况下，sp 单位的大小与 dp 相同，但它会根据用户喜欢的文本大小调整大小。

图 1. 两个相同大小的屏幕可能有不同的像素数