任意浏览器的默认字体高度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换算：
任意浏览器的默认字体高度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作为单位就行了。

具体使用时候我们在对全体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处理汉字时，对于浮点的取值精确度有限。不知道有没有 其他的解释。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>em</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            width: 300px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            margin: 10px auto;

            background: #ccc;

        }

        .demo1{

            font-size: 14px;

        }

        .demo2{

            font-size: 14pt;

        }

        .demo3{

            font-size: 1.4em;

        }

    </style>

</head>

<body>

<div class="demo1">单位是PX</div>

<div class="demo2">单位是PT</div>

<div class="demo3">单位是EM</div>

</body>

</html>

em,pt和px之间的换算的更多相关文章

  1. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  2. CSS3中的Rem值与Px之间的换算

    bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...

  3. CSS3 中的 rem 值与 px 之间的换算

    想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...

  4. em与px之间的换算

    任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的bo ...

  5. （转）CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  6. CSS字体大小: em与px、pt、百分比之间的对比

      CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...

  7. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

  8. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  9. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

随机推荐

  1. bzoj1095: [ZJOI2007]Hide 捉迷藏 线段树维护括号序列 点分治 链分治

    这题真是十分难写啊 不管是点分治还是括号序列都有一堆细节.. 点分治:时空复杂度$O(n\log^2n)$,常数巨大 主要就是3个堆的初始状态 C堆:每个节点一个,为子树中的点到它父亲的距离的堆. B ...

  2. XML 语法规则

    转摘自:http://www.w3school.com.cn/xml/xml_elements.asp XML 语法规则 XML 文档包含 XML 元素. XML 的语法规则很简单,且很有逻辑.这些规 ...

  3. JAVA编程心得-多态设计初步

    面向对象的思想中,封装,继承,多态作为特性会在开发中广泛应用,一个健壮的系统除了功能强大以外,它的可扩展性应该也很强,多态恰好应用了这个思路. 下面我以杨小聪去某地的方式为例,我们知道首先杨小聪要去某 ...

  4. HashMap早知道

    第一眼hashmap始终Collection那个地点 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGxmMTIzMzIx/font/5a6L5L2T/f ...

  5. Spring + JDK Timer Scheduler Example--reference

    http://www.mkyong.com/spring/spring-jdk-timer-scheduler-example/ In this example, you will use Sprin ...

  6. HDU1495(bfs)

    非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. LockSupport的park和unpark

    LockSupport是JDK中比较底层的类,用来创建锁和其他同步工具类的基本线程阻塞原语. Java锁和同步器框架的核心AQS:AbstractQueuedSynchronizer,就是通过调用Lo ...

  8. (转载)重温SQL——行转列，列转行

    原文地址:http://www.cnblogs.com/kerrycode/archive/2010/07/28/1786547.html 行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通 ...

  9. div置于页面底部

    一直对于页面置底有一些困惑,下面这个例子不知道能不能解决 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 介绍SmartUpload很好的网站

    附带链接:http://www.cnblogs.com/elleniou/archive/2012/09/24/2700583.html