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

比如电脑、比如手机屏幕

例如有手机屏幕尺寸是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. 【Java面试题】16 静态代码块,main方法,构造代码块,构造方法

    public class HelloB extends HelloA{ public HelloB() { System.out.println("HelloB"); } { Sy ...

  2. c++ list sort

      1.  bool operator < (S & b) {      return ID < b.ID;     } struct S { std::string firstn ...

  3. c++ c++ 与 Java

    1.c++ c++ 如果1个类的定义中包含另一个类,那么在stdafx.h中 被包含的类必须放在包含类的前面,不然编译器找不到被包含类,c++没有包的概念,所以包含头文件时要注意顺序,而java不存在 ...

  4. 理解ros话题--6

    理解ROS话题(原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/) Description: 本教程介绍ROS话题(topics)以及如何使用ro ...

  5. POJ 3093 Margaritas(Kind of wine) on the River Walk (背包方案统计)

    题目 Description One of the more popular activities in San Antonio is to enjoy margaritas in the park ...

  6. NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

    Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

  7. Apache Prefork、Worker和Event三種MPM分析

    三種MPM介紹 Apache 2.X  支持插入式並行處理模塊,稱爲多路處理模塊(MPM).在編譯apache時必須選擇也只能選擇一個MPM,對類UNIX系統,有幾個不同的MPM可供選擇,它們會影響到 ...

  8. android 仿QQ手机版

    千人2群开启,欢迎大家围观打酱油,群号145667827     您当前位置 : JavaApk-安卓应用游戏源码服务专家 » QQ » Android项目源码界面超级华丽的仿QQ最新版本 Andro ...

  9. Linux下Redis集群环境的搭建

    一.安装redis(使用redis3.0版本) 1.需要gcc环境,如果没有执行命令安装gcc yum install gcc-c++ 2.下载redis3.0的源码包并上传至服务器 3.解压源码包 ...

  10. 【Laravel】Mac下玩转Laravel

    1 apache 首先Mac系统是自带了Apache,只需要执行 sudo apachectl start 就可以打开Apache服务,然后访问 http://localhost 就可以访问到,it' ...