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

比如电脑、比如手机屏幕

例如有手机屏幕尺寸是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. 演示--Jquery核心选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. win7 自带计算机(for programmer)

    打开win7的Accessories, 看到Calculator, 点击打开计算器. 可以看到32位的2进制代码:

  3. IM软件业务知识—导航

    ----------------------------------------------------欢迎查看IM软件业务知识<专栏>-------------------------- ...

  4. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 WOPI和新的Office Web Apps Server

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序  WOPI和新的Office Web Apps Server ...

  5. 在lampp的proftpd下新增FTP用户的方法与配置

    用LAMPP的安装方法可以开一个默认的lampp用户,不过多用户怎样管理.目录怎样设置?这里简明说一下. 要求:使用Lampp的proftpd,开通多个FTP用户,并各分配一个目录,而且需要限制用户在 ...

  6. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  7. 如何偷懒地用 PHP 搭建一个班级网站

    版权声明:本文由李宜东原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/116 来源:腾云阁 https://www.qclo ...

  8. c# Use NAudio Library to Convert MP3 audio into WAV audio(将Mp3格式转换成Wav格式)

    Have you been in need of converting mp3 audios to wav audios?  If so, the skill in this article prov ...

  9. Andorid- 反序列化,采用pull解析 xml 文件

    MainActivity.java 主入口,通过获得 XML文件 ,然后将解析后的文件标签以及文本内容拼接到 StringBuffer中,最后显示在TextView上 package com.exam ...

  10. 微信小程序 --- 组件

    view组件:小程序使用最多的组件.可以理解为 div: Text组件:用于展示文字.可以理解为 p span 标签.(除了Text组件以外的其他组件都无法被长按选中) Text组件无法解析HTML, ...