任意浏览器的默认字体高度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中URL传递中文参数的问题

    今天在调用一个接口时,需要传递一个中文参数,结果获取不到数据,原因就在于中文传参的编码问题. 问题来源:URL url= new URL("http://XXX?OrganName=司法厅& ...

  2. mysql繁字体报错,Incorrect string value: '\xE9_' for column 'UserName' at row 1

    mysql 插入繁体字的时候报错,然后网上找了,说是mysql的库设置为character-set = utf8mb4 结果设置还是没效果 搞了好几天都不知道什么原因,然后今天想了想,好像之前有个学长 ...

  3. PAT 1057. Stack (30)

    题目地址:http://pat.zju.edu.cn/contests/pat-a-practise/1057 用树状数组和二分搜索解决,对于这种对时间复杂度要求高的题目,用C的输入输出显然更好 #i ...

  4. HDU 3333 & 3874 (线段树+离线询问)

    两个题目都是求区间之内,不重复的数字之和,3333需要离散化处理................. 调试了一下午........说多了都是泪........... #include <iostr ...

  5. powershell创建并加载配置文件

    $pshome :powershell的主目录 $profile :显示 Windows PowerShell 配置文件的路径 test-path $profile :确定是否已经在系统上创建了 Wi ...

  6. POJ 1330 Nearest Common Ancestors（Tree）

    题目:Nearest Common Ancestors 根据输入建立树,然后求2个结点的最近共同祖先. 注意几点: (1)记录每个结点的父亲,比较层级时要用: (2)记录层级: (3)记录每个结点的孩 ...

  7. android 的异步任务

    /** * 异步任务的三个泛型参数: * 1.调用execute方法时传入的参数类型,输入参数 * 2.progressUpdate的方法入参 * 3.异步任务的返回结果类型 doInBackgrou ...

  8. 文件和目录之chdir、fchdir和getcwd函数

    每个进程都有一个当前工作目录,此目录是搜索所有相对路径名的起点(不以斜杠开始的路径名为相对路径名).当用户登录到UNIX系统时,其当前工作目录通常是口令文件(/etc/passwd)中该用户登录项的第 ...

  9. 关于Ubuntu修改默认运行级别

    第一种方法:(内核级别的)   Sudo vi /etc/default/grub 修改GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash” 为:GRUB_CMDLINE ...

  10. R-大数据分析挖掘（5-R基础回顾）

    (一)R函数 R是一种解析型语言,输入后可直接获取结果 函数(输入参数,参数) R的函数分为“高级”和“低级函数” • 高级函数可调用低级函数 • 高级函数称为泛型函数 • 函数名  <-­‐ ...