android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

px：像素

分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，单位为px；

例：iphone5的分辨率为：640 × 1136 px

ppi：Pixel per inch，每英寸像素数，为像素密度，单位：像素/每英寸

针对显示器设计时，ppi=dpi

dpi：dots per inch，每英寸像素点，为像素密度，单位：像素/每英寸；

dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸数

dp：在Android开发中，使不同密度的屏幕显示一致的UI元素。称“密度独立像素”

dp=(dpi/(160像素/英寸))px

@1x、@2x、@3x：在ios开发中，为使在不同设备下显示一致的UI元素，将iphone手机分为了3类，对应称之为一倍图、二倍图、三倍图

在Android开发中的应用

如上图所示，为方便开发，Android将主流设备分为了mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五大类。

例如：华为 Nova手机

主屏尺寸：5英寸 1080x1920像素

则：ppi=dpi=√ (1080^2 + 1920^2) / 屏幕英寸数 ≈ 440像素/每英寸

dp=(440/(160像素/英寸))px ≈ 3px

其实当我们计算出dpi的时候，通过上表就可以知道，该屏幕属于xxhdpi屏，俗称3倍图

通过计算可以得出，一般情况下：

360px 宽的屏幕为mdpi(1倍图)

480px 宽的屏幕为hdpi(1.5倍图)

720px 宽的屏幕为xhdpi(2倍图)

1080px 宽的屏幕为xxhdpi(3倍图)

1440px 宽的屏幕为xxxhdpi(4倍图)

Android设计中常见的尺寸与距离：

顶部状态栏高度：24dp

Appbar最小高度：56dp

底部导航栏高度：48dp

悬浮按钮尺寸：56x56dp/40x40dp

用户头像尺寸：64x64dp/40x40dp

小图标点击区域：48x48dp

侧边抽屉到屏幕右边的距离：56dp

卡片间距：8dp

分隔线上下留白：8dp

大多元素的留白距离：16dp

屏幕左右对齐基线：16dp

文字左侧对齐基线：72dp

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍

所有可操作元素最小点击区域尺寸：48dp × 48dp；如实在满足不了可缩小视觉控件的大小，但是需要保留点击区域的大小

在iOS开发中的应用

如上图所示，为方便开发，苹果将设备分为了@1x、@2x、@3x三大类。

除了状态栏高度无法改变，别的可以根据实际设计进行微调。

在@2x屏幕下，所有可操作元素最小点击区域尺寸为88px；如实在满足不了可缩小视觉控件的大小，但是需要保留点击区域的大小

根据上表所示，我个人习惯用iPhone5作为设计原始稿尺寸，所有icon都用矢量的图形元素进行绘制，方便后续的放大缩小处理。之所以用iPhone5的尺寸，是因为，5和6同为@2x，如用6的尺寸来设计，容易使5的界面元素太过拥挤。

参考资料：

android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x相关推荐

dp的定义原理和dpi,ppi,px,sp之间的区别
扩展知识: 1080p和720p是什么意思百度百科分辨率中最后一段话不明白的,可以参考这里在开始讲解dp前,先来认识一些概念: 相关尺寸单位 px(pixel 像素):屏幕上的点,一般HVGA代表 ...
dp的定义原理和dpi,ppi,px,pt,sp之间的区别
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/48007855 文章出自:薛瑄的博客你也可以查看我的其他同类文章,也会让你有一定的 ...
dp的定义原理和dpi ppi px pt sp之间的区别
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/48007855 文章出自:薛瑄的博客你也可以查看我的其他同类文章,也会让你有一 ...
图片尺寸像素点,图片的大小,分辨率,a4纸,dpi,ppi,pt,pixel像素,屏幕尺寸
catalog 图片大小 a4纸 DPI,PPI Pt,Px 图片大小对于RGB模式, 一个像素点, 由 (R, G, B) 三个颜色通道组成; 且, 每个通道, 都占 1个字节; color: ...
Android中常见的单位ppi,dp,dpi,sp,px
在android 开发过程中,我们使用的单位比较少,一般情况下在描述字体大小的时候我们通常用sp,而在设置间距的时候我们用dp,除此之外很少再用到其他单位,而且很多时候我们用着用着就习惯了,也不去探究 ...
[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系？
[css] ui设计中px.pt.ppi.dpi.dp.sp之间的关系? QQ20150717160352 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: ...
浅谈屏幕适配 dp dip sp dpi ppi px sp
一.Drawable资源文件夹之间的关系 Android开发中,UI一般会制作多种图片素材,根据素材的分辨率大小,放在如下几个文件夹中: Android 工程里 res 目录下的 drawable-h ...
Android手机适配，手机尺寸、px、dpi、dp、sp详解
转载请注明出处:http://blog.csdn.net/z191726501/article/details/50411483 最近一直在学习Android的适配问题,在学习的过程中发现很多博客抄来 ...
dpi和ppi换算_八一八那些px、pt、ppi、dpi、dp、sp之间的关系
做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元 pt: point,点,印刷行业常用单位, ...
android 全局dp单位,android应用开发之View的大小计量单位（px、dpi、dp、dip、sp）
http://blog.csdn.net/ljianhui/article/details/43601495?ref=myread 一.像素(px)与屏幕分辨率 1)px(Pixels ,像素):对应 ...

android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x相关推荐

最新文章

热门文章