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

比如电脑、比如手机屏幕

例如有手机屏幕尺寸是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. oracle的varchar2和clob类型在hibernate中使用

    1.在oracle中 varchar2的最大长度为4000 bytes,即varchar2(4000),最多能储存2000个汉子或4000位的数字字母.当储存值超过时可以使用clob(Characte ...

  2. Nginx的启动与停止,重启

    1.先确定nginx所在的文件位置 如: 重启 1.验证nginx配置文件是否正确 方法一:进入nginx安装目录sbin下,输入命令./nginx -t 2.重启Nginx服务 方法一:进入ngin ...

  3. Mysql利用match...against进行全文检索

    在电商项目中,最核心的功能之一就是搜索功能,搜索做的好,整个电商平台就是个优秀的平台.一般搜索功能都使用搜索引擎如Lucene.solr.elasticsearch等,虽然这功能比较强大,但是对于一些 ...

  4. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

  5. 关于write solid code中的memset

    文中说明memset可以通过操作整形以加速程序执行速度,这一点值得肯定,问题在于unicore或arm中协处理器有地址访问对齐检查,如果我们如此操作,编译器最终使用str指令来完成,那么当地址未对齐时 ...

  6. MathType公式编辑器快捷键操作

    快捷键操作是最常见的操作方式,MathType软件系统提供大量的快捷键操作供用户使用.使用MathType公式编辑器快捷键操作可节省大量的操作的时间,本教程将详解MathType快捷键操作. 放大或缩 ...

  7. JavaScript ES2015

    <button>一</button> <button>二</button> <button>三</button> <but ...

  8. org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 12 in XML document from

    org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 12 in XML document from ...

  9. Java 基本语法----数组

    数组 数组概述 数组是多个相同类型数据的组合,实现对这些数据的统一管理. 数组属引用类型,数组型数据是对象(Object),数组中的每个元素相当于该对象的成员变量. 数组中的元素可以是任何数据类型,包 ...

  10. 使用loadrunner进行压力测试遇到的问题总结

    本人整理了一个LR使用过程中遇到的各种问题的总结文档,有需要可以加QQ群169974486下载. 一.无法生成虚拟用户,运行报错:CCI compilation error -vuser_init.c ...