PX\EM\PT单位介绍

px Pixel单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多,这里em与html <em>标签的"EM"拼写完全相同,而这里em作为单独文本单位。
pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。

1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用PX作为单位;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

em与px换算

任意浏览器的默认字体高度16px(16像素)。
所有未经调整的浏览器都符合: 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作为单位就行了。
12px相当于9pt长度;
12px相当于0.75em长度;
9pt相当于0.75em长度;
一般我们使用em换算px较多
高级em与px换算:
具体使用时候:
我们在对全体html标签声明初始一次font-size=62.5%
如:
*{font-size=62.5%}
即可此后面布局可依据以下技巧进行设置em单位
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此类推相当于初始font-size=62.5%后,em与px单位就只有10倍差距,以便方便计算与设置em长度数值使用。
em单位有如下特点:

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。
我们在写CSS的时候如果要用em为单位,需要注意两点:
  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
推荐网页单位 

所以为了单位换算错误推荐使用PX(像素)作为网页制作单位。
以上为大家介绍了px em pt单位,及换算方式,一般现在我们使用长度单位都以px为长度单位。这里我们也推荐使用以px(像素)为网页的尺寸长度单位,符合浏览器的像素单位,同时也为了方便计算长度尺寸。
关于px pt em单位总结

1)、推荐px像素为单位:通常我们使用px(像素为单位)较多,其次是em单位,平时推荐大家以px为单位;
2)、我们的显示屏分辨率以px像素为单位;
3)、我们QQ截图时候也是以px像素单位。

em px pt单位介绍及换算的更多相关文章

  1. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  2. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

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

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

  4. CSS文字大小单位px、em、pt(转)

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  5. 你应该知道的CSS文字大小单位PX、EM、PT[转]

    摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...

  6. 你应该知道的CSS文字大小单位PX、EM、PT

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用 ...

  7. CSS文字大小单位PX、EM、PT

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的"95 ...

  8. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

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

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

随机推荐

  1. 【tarjan+SPFA】BZOJ1179-[Apio2009]Atm

    [题目大意] 给出一张有点权的有向图,已知起点和可以作为终点的一些点,问由起点出发,每条边和每个点可以经过任意多次,经过点的权值总和最大为多少. [思路] 由于可以走任意多次,显然强连通分量可以缩点. ...

  2. BZOJ2671 : Calc

    设$d=\gcd(a,b),a=xd,b=yd$,则$a+b|ab$等价于$x+y|xyd$. 因为$x,y$互质,所以$x+y|d$. 假设$x<y$,那么对于固定的$x,y$,有$\lflo ...

  3. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) C. Table Tennis Game 2 水题

    C. Table Tennis Game 2 题目连接: http://codeforces.com/contest/765/problem/C Description Misha and Vanya ...

  4. PHP上传文件大小限制的问题(转)

      在用PHP进行文件上传的操作中,需要知道怎么控制上传文件大小的设置,而文件可传大小是受到多种因素制约的,现总结如下:1.php.ini:upload_max_filesize 所上传的文件的最大大 ...

  5. HDU 4734 F(x) (2013成都网络赛,数位DP)

    F(x) Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  6. 如何调整word中表格某一列占半分比

    1.可以拖动,但是不准确 2.

  7. 为什么MacBook装Windows这么火?

    Mac到底要不要装Windows?一直以来这都是个很有争议性的话题.只要你经常浏览国内一些知名Mac论坛,就会发现那里不仅有各种Mac装Windows教学贴.讨论区,而且时不时还会冒出关于“Mac装不 ...

  8. lufylegend:Lbuttion等UI组件

    1,矩形按钮LButtonSample1 首先来看看LButtonSample1按钮的绘制. 在lufylegend.js引擎中可以利用LButton类来添加一个按钮,但是你需要传入按钮弹起和按钮按下 ...

  9. 一个最简单的通过WireShark破解SSL加密网络数据包的方法

    原文地址: http://article.yeeyan.org/view/530101/444688 一般来说,我们用WireShark来抓取包进行分析是没有多大问题的.但这里有个问题是,如果你碰到的 ...

  10. java.util.Vector排序

    Vector的排序: import java.util.*; class MyCompare implements Comparator //实现Comparator,定义自己的比较方法{public ...