dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

一、基本概念

  • dip        : Density independent pixels ,设备无关像素。
  • dp        :就是dip
  • px        : 像素
  • dpi       :dots per inch , 直接来说就是一英寸多少个像素点。常见取值 120,160,240。我一般称作像素密度,简称密度
  • density : 直接翻译的话貌似叫 密度。常见取值 1.5 , 1.0 。和标准dpi的比例(160px/inc)
  • 分辨率   : 横纵2个方向的像素点的数量,常见取值 480X800 ,320X480
  • 屏幕尺寸: 屏幕对角线的长度。电脑电视同理。
  • 屏幕比例的问题。因为只确定了对角线长,2边长度还不一定。所以有了4:3、16:9这种,这样就可以算出屏幕边长了。

二、应用

  在android里面,获取一个窗口的metrics,里面有这么几个值

     metrics.density; metrics.densityDpi;

  densityDpi : 就是我们常说的dpi。

  density      :  其实是 DPI / (160像素/英寸) 后得到的值。是不是有点奇怪,因为我带了单位。。。这个涉及到后面一个比较重要的东西,后面再说。

  从上面就看得出了,DPI本身的单位也是 像素/英寸,所以density其实是没单位的,他就是一个比例值。

  而dpi的单位是 像素/英寸,比较符合物理上面的密度定义,密度不都是单位度量的值么,所以我更喜欢把dpi叫像素密度,简称密度,density还是就叫density。

三、各单位间转换

1. 计算dpi 

  比如一个机器,屏幕4寸,分辨率480X800,他的dpi能算么。
  因为不知道边长,肯定不能分开算,4是对角线长度,那直接用勾股定理算对角线像素,除以4,算出来大概是 dpi = 233 像素/英寸。
  那么density就是 (233 px/inch)/(160 px/inch)=1.46 左右

  顺带说下,android默认的只有3个dpi,low、medium和high,对应 120、160、240,如果没有特别设置,所有的dpi都会被算成这3个,具体可以参考下这个帖子
  http://android.tgbus.com/Android/tutorial/201103/347176.shtml
  其中的default就是160。

2. 计算 dp 与 px

  我们写布局的时候,肯定还是要知道1个dp到底有多少px的。

  换算公式如下: dp = (DPI/(160像素/英寸))px = density px

  注意,这里都是带单位的。px是单位,dp是单位,density没单位。

  为了方便,假设dpi是240 像素/英寸 , 那么density就是1.5

  那么就是 dp=1.5px ,注意这是带了单位的,也就是 设备无关像素 = density 像素

  那么转换为数值计算的话,应该是下面这个式子

  PX = density * DP

也就是 
  像素值 = density * 设备无关像素值 ,请注意这里有个值字。

3. 为啥 标准dpi = 160

  (1)Android Design [1] 里把主流设备的 dpi 归成了四个档次,120 dpi、160 dpi、240 dpi、320 dpi

  实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75   来给界面中的元素来进行尺寸定义。

  也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。

  但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2

  而以 LDPI 和 XHDPI 为基准就更复杂了,所以选择 160 dpi

(2)这个在Google的官方文档中有给出了解释,因为第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。

四、 示例分析

1. 屏幕尺寸(screen size)

  就是我们平常讲的手机屏幕大小,是屏幕的对角线长度,一般讲的大小单位都是英寸。
  比如iPhone5S的屏幕尺寸是4英寸。Samsung Note3是5.7英寸。

  

图 1

2.像素(pixel)

  想像把屏幕放大再放大,对!看到的那一个个小点或者小方块就是像素了。

图 2

3.分辨率(Resolution)

  是指屏幕上垂直方向和水平方向上的像素个数。
  比如iPhone5S的分辨率是1136*640;Samsung Note3的分辨率是1920*1080;

图 3

4.dpi

  是dot per inch的缩写,就是每英寸的像素数,也叫做屏幕密度。这个值越大,屏幕就越清晰。
  iPhone5S的dpi是326; Samsung Note3 的dpi是386

图 4

5.dip

  是Density independent pixel的缩写,指的是抽象意义上的像素。跟设备的屏幕密度有关系。

  它是Android里的一个单位,dip和dp是一样的。

Google的官方说明是这样的:
  Density-independent pixel (dp) 
  A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. 
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

  就是说在160dpi的屏幕上,1dip=1px。
  它跟屏幕密度有关,如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px。

为什么我们在布局的时候最好要用dip,不要用px?

  是因为这个世界上存在着很多不同屏幕密度的手机,屏幕密度是什么?就是dpi,就是单位长度里的像素数量。

  想象一下,如果这些手机的尺寸一样,屏幕密度相差很大,那么是不是说一个手机水平方向上像素很少,另一个手机水平方向上像素很多?那我们画同样pix数量的时候,它显

  示的长度不就会不一样了?

  比如下面图中的两个手机,同时设置2px长度的Button,在屏幕密度较高的手机里就会显示的比较小。

  而同时设置的2dip长度的Button,在两个手机上显示的大小是一样的。

图 5

  所以如果你在App布局中都用的px作为单位,那么你的App跑在各个设备上就会出现奇奇怪怪的现象了。

  来看一下emulator上的效果,我定义了两个Button,分别用px和dip做单位。

  布局文件里这样写

<Button android:layout_width="100px"android:layout_height="100px"android:text="@string/str_button1"/><Button android:layout_width="100dip"android:layout_height="100dip" android:text="@string/str_button1"/>

显示的界面是这样的:

  

图 6

  getResources().getDisplayMetrics().densityDpi 就是屏幕密度。
  getResources().getDisplayMetrics().density 也可以理解为1dip相当于多少个px啦。
  上面的dpi是240,1dip=1.5px
  你看,100dip的Button是100pxButton的1.5倍长吧。

前端开发 基础知识 dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算相关推荐

  1. 网站前端开发基础知识学什么?必备技能

    网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...

  2. web前端开发基础知识_前端开发是什么?学前端开发需要学什么语言?你想成为程序员吗?...

    Web前端是什么 前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...

  3. web前端开发基础知识整理以及前端视频教程

    随着移动互联网的发展和越来越多创业公司的加入,Web前端工程师的岗位空缺越来越大,薪资迅速上涨.Web前端工程师比以往更具有号召力. 想要自学成为炙手可热的Web前端工程师?靠零碎化的短视频可不行,你 ...

  4. web前端开发基础知识_薪资30K+的web前端怎么做到的?

    好的web前端年薪会有多少?首先,我们要知道怎么才能成为一个所认为的"好的web前端",其次,自己能值多少价值? 用户体验为王,是互联网时代的座右铭.人们在享受互联网带来的便捷的同 ...

  5. 前端开发基础知识整理--web综合篇

    该篇是web综合部分,主要包含了HTML(HTML5).http.页面优化及其他一些概念性的问题 doctype是什么?标准模式与兼容模式各有什么区别? <!doctype>声明必须处于H ...

  6. 前端开发基础知识汇总

    一.HTML 1.前言与常用标签 浏览器 内核 备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...

  7. 谷粒商城-前端开发基础知识

    目录 1.ES6 1.1.简介 1.2.let声明变量 1.4.解构表达式 1.5.字符串扩展 1.6.函数优化 1.7.对象优化 1.8.map和reduce 1.9.Promise 1.9.模块化 ...

  8. 【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结(js一)

    JavaScript 组成: ECMAScript:规定了js基础语法核心知识(变量,分支语句,循环语句,对象等) DOM:操作文档(页面元素移动,大小,添加删除等) BOM:操作浏览器(页面弹窗,检 ...

  9. div中插入图片_Web前端开发基础知识,设置网页背景图,如何在网页中插入图片...

    图片 一.图片的表现形式 当我们在制作页面的时候,通常会遇到图片的三种表现形式,如下: 1.内容图片 内容图片是页面中真正的内容,没有内容图片,就无法完整的理解页面内容.如淘宝网上的商品展示图片,这些 ...

  10. Web前端开发基础三剑客学习知识分享

    Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...

最新文章

  1. 关闭ES动态创建type
  2. 【组合数学】递推方程 ( 递推方程示例 2 汉诺塔 | 递推方程示例 3 插入排序 )
  3. node 跨域请求设置
  4. 对Javascript 类、原型链、继承的理解
  5. 自然语言处理中的自注意力机制(Self-Attention Mechanism)
  6. 菜鸟涂鸦作品展_No.27
  7. tomcat使用安全及CVE-2017-12615
  8. Linux就业技术指导:简历项目经验示例
  9. web前端开发面试题(二)
  10. 2009年中国直销业9大主旋律
  11. 用户名第一个字符设置为默认头像
  12. C语言|求最小公倍数
  13. IE不能上网浏览的常见原因和解决方法
  14. excel 导入文本数据乱码问题
  15. 苹果手机如何设置代理ip?
  16. 粒子的散射模拟matlab程序,基于Matlab的α粒子的散射实验模拟.pdf
  17. WordPress个人资料中直接修改用户名插件Username Changer
  18. java判断对象是否为数组 并且取得数组的值 --- 用instanceof或则isArray() 方法
  19. PHP之Zip扩展,解压缩文件,ZipArchive类
  20. PHP函数处理字符串大全

热门文章

  1. python绘制3d动态模型_python+matplotlib库绘制数学3d模型分析图
  2. 油猴插件swagger复制路由等
  3. 修改计算机管理员administrator的密码
  4. Why、When的疑问代词_22
  5. Linux 查看与修改mtu值
  6. Prisma(一)——基础
  7. PS3主机今日发售 附官方问答
  8. 3.5 Python 实例4-文本进度条
  9. 对比excel 轻松学python百度云_解读《对比Excel轻松学习Python数据分析》
  10. 测试iphone硬件好坏的软件,iPhone手机如何检测硬件故障,硬件检测必备技能,建议了解一下...