1、前言:

读完本文你会学到什么:

  • dp(device pixels)
  • px(css pixels)
  • pt(point)
  • ppi(pixels per inch)
  • dpi(dots per inch)
  • dpr(device pixels ratio)
  • dip(device independent pixel)

读本文你需要掌握哪些基本知识:

  • 1in(英寸) == 2.5399999961392cm
  • 常常用1英寸等于2.54厘米
  • 1m == 3尺
  • 1尺 == 10寸
  • 1寸 == 3.33333333cm
  • iphone6屏幕4.7寸是指屏幕对角长度为4.7英寸
  • iphone6的高宽比为 iphone6_height : iphone6_width = 16 : 9

2、dp(设备像素)

2.1、说明

  1. dp是设备像素,也叫物理像素,顾名思义,他就是指一个物理发光点的单位。
  2. iphone6官方在产品说明书上写的屏幕分辨率为1334x750像素指的是物理分辨率。
  3. 也就是高1334dp,宽750dp

3、px(逻辑像素)

3.1、说明:

  1. px是逻辑像素,逻辑像素是相对的单位。
  2. 在每个设备上对应的dp是不一样的是不一样的,在相同设备上对应的dp也可以不同。
  3. 这就是为什么我我们的图片可以放大缩小的原因。

4、pt(点)

4.1、说明

  1. pt是专用的印刷单位“点”,这个单位是绝对单位.
  2. 1pt == 1/72in

5、ppi(每英寸的像素)

5.1、说明

  1. ppi指的是单位英寸长度上的平均孔数
  2. iphone6官方在产品说明书上写像素密度为326ppi,指的就是在它的1in == 326dp

5.2、计算iphone6的像素密度

先通过iphone6的对角4.7in和高宽比可以算出高和宽:

iphone6_width = 2.304227826273027in = 2.3in

iphone6_height = 4.096405024485382in =4.1in

再然后通过这个宽高和屏幕物理分辨率可以算出ppi

iphone6_width_ppi = 750dp/2.3in = 326.0869565217391ppi

iphone6_height_ppi = 1334dp/4.1in = 325.3658536585366ppi

可以得出宽和高都是非常近似的等于326dp的

6、dpi(每英寸的点数)

6.1、说明

  1. dpi是输出设备的物理能力
  2. 例如:300DPI的油墨打印机是指每英寸有300墨滴用于打印机,每英吋能印出的点的数目为300
  3. “像素”(p)只存在于计算机显示领域,而“点”(d)只出现于打印或印刷领域。

6.2、注意

  1. 在显示器中ppidpi是同一概念

7、dpr(devicePixelRatio)

7、1说明

  1. window.devicePixelRatio是设备上物理像素和逻辑像素的比例。
  2. dpr不是单位,是一个属性,在浏览器中通过 window.devicePixelRatio 获取屏幕的DPR
  3. 在用微信开发者工具开发小程序的时候,在切换模拟器的时候可以看到各个设备的dpriphone6的设备dpr2

8、dip(设备独立像素)

8、1说明

  1. 是由谷歌推出用来适配各个安卓屏幕差异的。
  2. 在定义UI布局时,应该使用一个虚拟像素单元,以一种密度独立的方式表示布局维度或位置。
  3. 密度无关的像素相当于一个物理像素在160 dpi屏幕上,这是系统为“中等”密度屏幕所假设的基线密度。
  4. 在运行时,系统会根据实际的屏幕密度,透明地处理dp单元的任何扩展。将dp单元转换为屏幕像素很简单:px=dpdpi/160)。
  5. 例如,在240 dpi屏幕上,1 dp等于15物理像素。在定义应用程序的UI时,应该始终使用dp单元,以确保在具有不同密度的屏幕上正确显示UI
  6. 就是说在160dpi的屏幕上,1dip=1px
  7. 它跟屏幕密度有关,如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px

9、彩蛋

9.1、viewport

  1. viewport是用户网页的可是窗口。
  2. 手机浏览器是把页面放在一个虚拟的"窗口"viewport)中,通常这个虚拟的"窗口"viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

9.2、实例代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

具体值含义可以参考我之前写的你绝对不知道的head标签

px和dp(内含大量的像素单位详解)的更多相关文章

  1. OpenCV学习C++接口 Mat像素遍历详解

    OpenCV学习C++接口 Mat像素遍历详解

  2. px、dp和sp,这些单位有什么区别?

    DP 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以 首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算 ...

  3. Android系统dimension单位详解

    转载请注明出处,谢谢!http://www.cnblogs.com/coding-way/p/3457878.html Android设备种类多样,要想适配好各种屏幕,理解各种屏幕数据是必须的.首先先 ...

  4. 字体大小之px、em、rem、pt,字号详解

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...

  5. css中em单位详解,说明

    em详解      em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...

  6. [Android问答] px、dp和sp,这些单位有什么区别?

    相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小 ...

  7. px、dp与sp的区别以及换算

    1.px 即像素,1px代表屏幕上的一个物理像素点. 2.dp dip:device independent pixels(设备独立像素),dp与dip一样,不同的设备有不同的显示效果,一般为了支持W ...

  8. 【android】【转发】Android中PX、DP、SP的区别

    转载 http://blog.csdn.net/donkor_/article/details/77680042 前言: 众所周知,Android厂商非常多,各种尺寸的android手机.平板层出不穷 ...

  9. Android开发(十)——像素单位dp、px、pt、sp的比较

    dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖 ...

随机推荐

  1. JS原生隐士标签扩展

    最近项目开发中,开发了不少的接口,有一个接口是这样子的.先从A公司拿到数据后,存放到我们公司数据库里,然后需要将数据展示给客户,下面这个界面,后台要实时刷新,后台写了个定时器,2S刷一次从后台拼接好H ...

  2. EasyUI combobox下拉列表实现搜索过滤(模糊匹配)

    项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能.看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便.于是就记录一下模糊匹配的方 ...

  3. LASSO原作者的论文,来读读看

    Regression Shrinkage and Selection via the lasso 众所周知,Robert Tibshirani是统计领域的大佬,这篇文章在1996年提出了LASSO,之 ...

  4. 夯实Java基础(十二)——异常处理

    1.异常处理概述 在Java程序执行过程中, 总是会发生不被期望的事件, 阻止程序按照程序员预期正常运行, 这就是Java程序出现的异常. 异常处理是基于面向对象的一种运行错误处理机制,通过对异常问题 ...

  5. kube-proxy源码解析

    kubernetes离线安装包,仅需三步 kube-proxy源码解析 ipvs相对于iptables模式具备较高的性能与稳定性, 本文讲以此模式的源码解析为主,如果想去了解iptables模式的原理 ...

  6. ubuntu18.04下安装matlab2018a

    一.下载 百度网盘链接:https://pan.baidu.com/s/1M6KafnsljmYV9_5m_1pXMw 提取玛:jp76 二.安装 下载下来的文件夹中有三个文件,分别是破解文文件与映像 ...

  7. 一起来学JavaScript吧(JS兔子领进门)

    首先我们学习一门语言呢不一要学习它的所有历史,但是一定要知道它的使用基本规则.不要在最基础的部分出错.不过胡萝贝还是带你了解JavaScript的历史吧. 1994年网景公司(Netscape)发布了 ...

  8. 内存泄漏排查之:Show me your Memory

    java 语言有个神奇的地方,那就是你时不时会去关注下内存.(当然了,任何牛逼的同学都应该关注内存) 今天我们就来这么场景吧:某应用运行了一段时间后,ecs监控报警了,内存比较高了,怎么办?随着时间的 ...

  9. APP启动优化

    1. 去除启动黑屏 1.1 在style.xml中定义两种主题: <style name="AppTheme" parent="Theme.AppCompat.Da ...

  10. Opengl_入门学习分享和记录_02_渲染管线(一)顶点输入

    现在前面的废话:最近好事不断!十分开心!生活真美好! 好了今天要梳理一下,顶点输入的具体过程,同样也是渲染管线中的第一个阶段的详细过程的介绍.之前介绍过,OpenGL操作的是一组3D坐标,所以我们的输 ...