dp - sp与PX的关系

Question

我不是在问dp，sp和px有什么区别。

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

例如：

1. 标题是24sp，它等于多少像素？ （它不是24px，我试过匹配它们，它大概是28px但是必须有一个标准的测量系统）。
2. 网格指南：＆＃34;所有组件都与8 dp方形基线网格对齐。＆＃34; - 它等于多少像素？
桌面或任何普通显示器或移动设备上的

1px =？dp =？sp？

Answer 1

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

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

Answer 2

我认为答案是：

在任何普通的显示器或移动设备上，

1px = 1dp = 1sp。

我是怎么想出来的？

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

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

Answer 3

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

这可以为您提供几乎任何设备的安全尺寸。在某些设备上看起来会有点大，特别是iPad（常规）。

原因如下：

“一个dp对应于160 dpi像素的物理尺寸”（https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD）

160 dpi意味着：

160点= 1英寸

因此：

160 dp = 1英寸（25.4 mm）

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

那是多少px呢？嗯，这取决于设备。

48 dp（7.6 mm）按钮高度的示例：

• iPad mini：48像素为什么： iPad mini屏幕宽约120毫米，使用768像素填充该空间。因此，对于7.6 mm的按钮高度，您需要162像素才能占据一英寸（25.4毫米）或48像素。

• Kindle Fire（7“）：43 px

• Kindle Fire（6“）：50 px

• iPhone：48 px

• Nexus 7:48 px

• 常规iPad：39像素

（我可能已经捏造了一点点向上/向下......我比48更喜欢48！）

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

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

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

Answer 4

在大多数情况下，所有功能都差不多。

Source

  

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

     

例如，考虑图1中的两个设备。如果将视图定义为“ 100px”宽，则该视图将在左侧的设备上显示大得多。因此，您必须改为使用“ 100dp”来确保它在两个屏幕上都显示相同的大小。

     

但是，在定义文本大小时，应改为使用可缩放像素（sp）作为单位（但切勿将sp用作布局大小）。默认情况下，sp单位的大小与dp相同，但是会根据用户的首选文本大小来调整大小。

图1.相同尺寸的两个屏幕可能具有不同数量的像素