热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

dp-sp与PX的关系-Relationbetweendp-spandPX

Iamnotaskingwhatisthedifferencebetweendp,spandpx.我不是问dp,sp和px有什么区别。Iamdesigningaw

I am not asking what is the difference between dp,sp and px.

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

I am designing a website based on google's new material design, all the measurements are in dp (for grid) and sp(for text). My question is how do they translate to pixels. I have been designing websites for more than 4 years and all the measurements (grid and font) are in pixels.

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

For Example:

  1. A headline is 24sp, how many pixels does it equate to? (its not 24px, I've tried matching them, it's around 28px but there has to be a standard measuring systems).
  2. 标题是24sp,它等于多少像素? (它不是24px,我试过匹配它们,它大约是28px但是必须有一个标准的测量系统)。

  3. Grid Guideline: "All components align to an 8 dp square baseline grid." - how many pixels does it equate to?
  4. 网格指南:“所有组件都与8 dp方形基线网格对齐。” - 它相当于多少像素?

1px = ?dp =?sp on a desktop or any average monitor or mobile device?

1px =?dp =?sp在桌面或任何普通的监视器或移动设备上?

3 个解决方案

#1


7  

I recommend reading Google's definitions of dp and sp, which can be found in the Android docs, here and here.

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

There's also some helpful information in the wonderful Designer's Guide to DPI.

精彩的DPI设计指南中还有一些有用的信息。

#2


6  

I think the answer is going to be:

我认为答案是:

1px = 1dp = 1sp on any average monitor or mobile device.

平均显示器或移动设备上的1px = 1dp = 1sp。

How did I come up with this?

我是怎么想出来的?

Because a pixel is a pixel, for andriod dp and sp are used because they are used for native apps which have to scale and the dpi of each screen is different based on device. For desktops all of this is same, off course the website has to be compatible/responsive for mobile devices but since the website loads in a browser, some additional media quires (based on guidelines) will do the job.

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

If anybody has some other logical conclusion, please share

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

#3


3  

A safe rule of thumb is to use 1 px = 1 dp.

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

This should give you a good safe size on just about any device. It will appear a bit large on some devices, notably the iPad (regular).

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

Here's why:

"A dp corresponds to the physical size of a pixel at 160 dpi" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

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

160 dpi means:

160 dpi意味着:

160 dots = 1 inch

160点= 1英寸

Therefore:

160 dp = 1 inch (25.4 mm)

160 dp = 1英寸(25.4 mm)

So when Google recommends that buttons have a touchable target height of 48 dp, they're saying that they need to be 0.3 inches (7.6 mm) tall.

因此,当谷歌建议按钮具有48 dp的可触摸目标高度时,他们说它们需要0.3英寸(7.6毫米)高。

So how many px is this? Well, that depends on the device.

那么有多少px呢?嗯,这取决于设备。

Examples for 48 dp (7.6 mm) button height:

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

  • iPad mini: 48 px Why: The iPad mini screen is about 120 mm wide and uses 768 px to fill that space. You therefore need 162 px to take up an inch (25.4 mm), or 48 px for your button height of 7.6 mm.

    iPad mini:48像素原因:iPad mini屏幕宽约120毫米,使用768像素填充该空间。因此,您的按钮高度7.6 mm需要162 px才能占用一英寸(25.4 mm)或48 px。

  • Kindle Fire (7"): 43 px

    Kindle Fire(7“):43像素

  • Kindle Fire (6"): 50 px

    Kindle Fire(6“):50像素

  • iPhone: 48 px

    iPhone:48像素

  • Nexus 7: 48 px

    Nexus 7:48 px

  • Regular iPad: 39 px

    普通iPad:39像素

(I may have fudged the rounding up/down a tiny bit.. I like 48 better than 49!)

(我可能已经捏造了一小部分上升/下降......我比48更好!)

Screen mm and CSS px width for examples: I calculated the screen width using the CSS px screen dimensions and diagonal length.

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

  • iPad mini: 1024 x 768 resolution and 201 mm diagOnal= 120 mm width.
  • iPad mini:1024 x 768分辨率和201 mm对角线= 120 mm宽度。

  • Kindle Fire 7": 858 x 533 resolution and 178 mm diagOnal= 94 mm width.
  • Kindle Fire 7“:858 x 533分辨率和178 mm对角线= 94 mm宽度。

  • Kindle Fire 6": 853 x 533 resolution and 152 mm diagOnal= 81 mm width.
  • Kindle Fire 6“:853 x 533分辨率和152 mm对角线= 81 mm宽度。

  • iPhone: 568 x 320 resolution and 102 mm diagOnal= 50 mm width.
  • iPhone:568 x 320分辨率和102毫米对角线= 50毫米宽度。

  • Nexus 7: 960 * 600 resolution and 178 mm diagOnal= 94 mm width.
  • Nexus 7:960 * 600分辨率和178 mm对角线= 94 mm宽度。

  • iPad regular: 1024 x 768 resolution and 246 mm diagOnal= 148 mm width.
  • iPad常规:1024 x 768分辨率和246 mm对角线= 148 mm宽度。

Note that for calculating the px height of the button you need to use the device CSS px dimensions. These numbers are not necessarily the same as the resolutions stated in the specs.

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


推荐阅读
author-avatar
樂烙清欢1982
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有