屏幕都有固定的物理长宽度属性和分辨率

比如电脑、比如手机屏幕

例如有手机屏幕尺寸是1.5英寸x2英寸,屏幕分辨率为240x320,

那么可以推算水平方向每英寸的像素数(dpi)是:240/1.5=160,同样可以推算出竖直方向每英寸像素数

1px就是指屏幕上的一个像素点;屏幕成像原理是通过屏幕上密布的像素点成像;

因此,当我们的屏幕的dpi不同,10px的长度将会在屏幕上显示不同物理长度;

android规定了4种四种像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),

它们对应的dp到px的系数分别为0.75、1、1.5和2,这个系数乘以dp长度就是像素数px

dp的出现就是为了调整成像显示效果,让我们看起来相同的物体在不同像素密度的屏幕上显示效果类似;

简单的说就是在不同的屏幕上指定了对象的长宽dp,那么在不同的屏幕上是按照屏幕的物理属性按比例伸缩;

pt是物理长度单位,1pt=1/72英寸=0.035厘米;

em与dp有点相似,是一个相对的度量单位,像素px是相对于显示器屏幕分辨率而言的。
  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:  1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,  也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
  em有如下特点:
  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。
  所以我们在写CSS的时候,需要注意两点:
  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
  也就是避免1.2 * 1.2=  1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,  因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问 题  Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

dp\dpi\px\pt\em单位长度理解的更多相关文章

  1. DPI/PPI/dp/sp/px/pt 移动设计手册

    转自DPI/PPI/dp/sp/px/pt 移动设计手册 做移动设计的同学,不管是原生app或者web app,应该对字体字号都是很头痛的问题.根本原因是,我们用唯一分辨率的电脑,设计各个不同尺寸大小 ...

  2. 必备:常用px,pt,em换算表(转)

    常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...

  3. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  4. HTML中字体单位px pt em之间的转换

    在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...

  5. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  6. 常用px,pt,em换算表

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  7. 常用px,pt,em换算及区别

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  8. android 解释dp,px,pt,sp单位

    1.dp(dip):不同设备有不同的显示效果,这个和设备硬件有关系,一般我们为了支持WVGA,HVGA和QVGA对剑使用这个,它是不依赖像素的 2.px:pixels(像素),不同设备显示效果相同,一 ...

  9. Android原生系统API自带dp、px、sp单位转换

    Android系统中自带的Api中可以使用TypedValue进行单位转换 1,调用系统api转换单位 // 获得转换后的px值 float pxDimension = TypedValue.appl ...

随机推荐

  1. (记录)eclipse常用设置步骤

    代码风格文件导入: https://blog.csdn.net/wangming520liwei/article/details/53911736 注释中的author修改: https://jing ...

  2. UVA - 11920 0 s, 1 s and ? Marks

    Description  0 s, 1 s and ? Marks  Given a string consisting of 0, 1 and ? only, change all the ? to ...

  3. 调用外部 DLL 中的函数(1. 早绑定)

    ,b,t,);end; end.

  4. 了解 Go 1.9 的类型别名

    http://colobu.com/2017/06/26/learn-go-type-aliases/

  5. Sass基础——Rem与Px的转换

    rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...

  6. 浅析Linux内核同步机制

    非常早之前就接触过同步这个概念了,可是一直都非常模糊.没有深入地学习了解过,最近有时间了,就花时间研习了一下<linux内核标准教程>和<深入linux设备驱动程序内核机制>这 ...

  7. Swift学习笔记之--类和对象

    通过在 class后接类名称来创建一个类.在类里边声明属性与声明常量或者变量的方法是相同的,唯一的区别的它们在类环境下.同样的,方法和函数的声明也是相同的写法 class Shape { func s ...

  8. eclipse中debug模式不能启动运行,run运行模式却能启动运行!

    这个问题我郁闷了好久!问题原因:因为断点太多了,断点冲突了. 解决办法:只要进如deug界面,选择BreakPoints选项,然后清除所有断点,再重新debug启动.问题解决! 希望能帮到遇到此问题的 ...

  9. 点击一个textView里的link导航至程序内可返回的自定义webView

    1,在AppDelegate.h里定义一个 id currentViewController; 在AppDelegate.m里 @implementation UIApplication (Priva ...

  10. filter IE滤镜(Internet Explorer)CSS

    收集一些IE滤镜,留作之后开发用. 透明度 #myElement { opacity: .; /* other browsers */ filter: progid: DXImageTransform ...