任意浏览器的默认字体高度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. Windows平台Atom编辑器的常用快捷键小抄Cheat Sheet

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Windows平台Atom编辑器的常用快捷键小抄Cheat Sheet.

  2. Unity4向上（Unity5）兼容PlayerPrefs的数据存储

    好久没有写项目.开发相关的内容了,刚好最近在做项目的更新时,遇到一个比较有意思的坑就随手记录一下. 因为项目的上一上线版本是由Unity5.3发的包,而最新的项目来不及同步更新到5.3版本发包测试,所 ...

  3. cocos2d-x触屏事件（单点触屏）

    转自:http://blog.csdn.net/onerain88/article/details/7550009 一般经常用到的触屏的情况有两种:一种是Layer统一接收触屏消息,然后由程序根据需要 ...

  4. Nginx/Apache图片缩略图技术

    1,目的 2,使用方式 3,Nginx + Linux 缩略图实现 3.1,原理 3.2,nginx配置实现 3.3,例子 4,Apache + Windows缩略图实现 4.1,环境 4.2,原理 ...

  5. sort函数的例子

    10.11编写程序,使用stable_sort和isShorter将传递给你的elimDups版本的vector排序.打印vector的内容. #include<algorithm> #i ...

  6. How to save/read file on different platforms

    You can use standard c functions, such as fopen, fwrite, to save and read file on different platform ...

  7. 【转】补充说明：关于Beaglebone black上debian无图形界面的问题及QT的窗口示例

    有个兄弟发了一个站内的私信给我,内容如下: 时间:2014-03-05 09:08:19 大哥,debian 的BBB版本没有图形界面吧 我安装后只有文本界面 我突然意识到,我前面有没有说清楚的地方, ...

  8. AFNetworking源码分析

    来源:zongmumask 链接:http://www.jianshu.com/p/8eac5b1975de 简述 在iOS开发中,与直接使用苹果框架中提供的NSURLConnection或NSURL ...

  9. How To Install Kernel 3.10 On Ubuntu, Linux Mint, Debian and Derivates

    n this article I will show you how to install Linux Kernel 3.10 on Ubuntu 13.10 Saucy Salamander, Ub ...

  10. javascript进击（八）JSON

    JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Ob ...