任意浏览器的默认字体高度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. Java字节转换类实现

    Java的类库支持完全不如C#,比如时间类,比如数据类型转换类等等,难道是我自己没找到吗? 下面是字节转换类,byte[]与short, int, long, float, double, Strin ...

  2. Visual C++中的编译器优化

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Visual C++中的编译器优化.

  3. 【转】Spring 4.x实现Restful web service

    http://my.oschina.net/yuyidi/blog/352909 首先我们还是跟之前一样,创建一个maven项目,不过因为Spring Restful web service是基于Sp ...

  4. Hdu 2473（并查集删除操作） Junk-Mail Filter

    有木有非常吊 加强 加强版   啊  ,看了都不敢做了   .后来先做了食物链这个我还是看过的.但还是A不掉,没明确神魔意思 .总而言之.大牛的博客是个好东西.我就那么看了一下,还是不懂怎莫办啊,哎, ...

  5. 微信公众号支付（一）：获取用户openId

    一.获取apikey,appsecret与商户号 注册公众号.商户号 二.获取用户的OpenId 1.设置[授权回调页面域名] 官方解释:用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回 ...

  6. BFM1

    BFM应该描述的是具有某种具体功能的电路.比如说,你的待测电路是一个智能卡,那他的BFM就是读卡器:那你就要根据协议,在BFM中描述出读卡器的具体行为. 写BFM就类似于写testbench了.BFM ...

  7. 判断是否为闰年（bool）

    bool为布尔型,只有一个字节,取值false和true #include<iostream>using namespace std;int main(){ int year; bool ...

  8. HOOK函数(一)——进程内HOOK

    什么是HOOK呢?其实很简单,HOOK就是对Windows消息进行拦截检查处理的一个函数.在Windows的消息机制中,当用户产生消息时,应用程序通过调用GetMessage函数取出消息,然后把消息放 ...

  9. JS实现rgb与16进制颜色相互转换

    1.rgb转16进制 function to16 (a) {//RGB(204,204,024) //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a- ...

  10. swift－01-利用元组判断字符串出现次数

    //问题的提出:有一个字符串 array = ["1","2","4","4","2"," ...