dp - sp与PX的关系

Question

我不是问dp,sp和px有什么区别.

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

例如:

1. 标题是24sp,它相当于多少像素？(它不是24px,我试过匹配它们,它大约是28px但是必须有一个标准的测量系统).
2. 网格指南:"所有组件都与8 dp方形基线网格对齐." - 它相当于多少像素？

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

Answer 1

我建议阅读Google对dp和sp的定义,这些定义可以在Android文档中找到,在这里和这里.

精彩的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毫米）

因此，当Google建议按钮的可触摸目标高度为48 dp时，他们表示按钮的高度必须为0.3英寸（7.6毫米）。

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

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

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

• Kindle Fire（7英寸）：43像素

• Kindle Fire（6英寸）：50像素

• iPhone：48像素

• Nexus 7：48像素

• 普通iPad：39像素

（我可能对四舍五入进行了一点点操作。我喜欢48比49好！）

屏幕毫米和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尺寸。这些数字不一定与规范中规定的分辨率相同。