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

比如电脑、比如手机屏幕

例如有手机屏幕尺寸是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. c++ define的用法(转)

    #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能 理解该命令的本质,总是在此处产生一些困惑,在编程时误用 ...

  2. asp.net截屏功能实现截取web页面

    using System.Drawing;  //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http ...

  3. Java中的各种加密算法

    Java中为我们提供了丰富的加密技术,可以基本的分为单向加密和非对称加密 1.单向加密算法 单向加密算法主要用来验证数据传输的过程中,是否被篡改过. BASE64 严格地说,属于编码格式,而非加密算法 ...

  4. spring xml properties split with comma for list

    在注入spring bean 属性值的时候常常会用到list, 一般使用方式例如以下: <bean id="testBean" class="com.mytest. ...

  5. java日志之slf4j与logback简单使用

    最近在开发遇到日志是使用slf4j与logback.xml的配置,所以就记录下来了. 1.导入这几个jar包: Logback 分为三个模块:logback-core,logback-classic, ...

  6. Spring中通过构造方法传参数

    1.实体类 package com.xbq.bean;import java.util.Timer; /** * @ClassName: Student * @Description: TODO 学生 ...

  7. ubuntu的安装方法

    Ubuntu 是一个启动速度超快.界面友好.安全性好的开源操作系统,它由全球顶尖开源软件专家开发,适用于桌面电脑.笔记本电脑.服务器以及上网本等,并且它可以永久免费使用.如果你厌倦了Windows,如 ...

  8. 如何使用css影藏滚动条

    1.单纯的一句代码: div ::-webkit-scrollbar {width: 0px;}//或者display:none 但是这代码最大的弊端就是只能在webkit内核的浏览器上进行显示,无法 ...

  9. ATL字符宏使用以及代码测试

    // ATL_Convert.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #incl ...

  10. poj_2195 最小费用最大流

    题目大意 一个nxm的地图,地图上的横纵交错成nxm个交叉点,其中有k个交叉点为房间,k个交叉点为k个小人的初始位置.小人可以在地图上沿着水平或垂直方向行走,每走一步的代价为1.求这k个小人分别到达k ...