任意浏览器的默认字体高度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 gui测试工具：AutoIt

    windows gui测试工具:AutoIt 2017-01-09 目录 1 简介2 示例1 记事本自动化操作3 示例2 上传文件 1 简介 返回 AutoIt v3 是用以编写并生成具有 BASIC ...

  2. 安装完Ubuntu 14.04要做的九件事

    www.linuxidc.com/Linux/2014-04/100411.htm 1.看看有哪些新特性 安装完之后的第一件事肯定是看看Ubuntu 14.04有哪些新的特性. Ubuntu 14.0 ...

  3. socket编程——一个简单的样例

    从一个简单的使用TCP样例開始socket编程,其基本过程例如以下: server                                                  client ++ ...

  4. 多平台响应键盘事件！（适用于Cocos2dx 3.0 alpha以上版本号）

    Hello everyone! For a week I've been looking on how to make a keyboard work! I managed to figure it ...

  5. android 沉浸通知栏

    IOS的沉浸式通知栏很高大上,通知栏和app统一颜色或样式,很美观.android上面也早就人实现这种效果了. 我在这边也写一个实现通知栏沉浸式的方法,目前只实现了相同颜色. 先要改布局文件xml & ...

  6. 高质量CSS编写规范

    ①id和class的命名在保持语义性的同时尽可能的短.不推荐的写法:#navigation {} .atr {}推荐的写法  : #nav {} .author {}可以缩写单词,但缩写后务必能让人明 ...

  7. 【转载】soapui基于持续集成工具自动化运行的调研姿势

    soapui中的testrunner.bat调研姿势,用于自动化测试副标题:soapui基于持续集成工具自动化运行的调研姿势 各位亲爱的同仁们,大家好吗?最近项目在搞持续集成工具,我们的测试用例都是基 ...

  8. C# 解决DrawImage绘制图片拉伸产生渐变

    ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing. ...

  9. 隐藏/显示&nbsp;我的电脑盘符驱动…

    组策略里更改即可:点击"开始"→"运行",输入"gpedit.msc",打开组策略.在窗口左侧的"本地计算机策略"中依次 ...

  10. 20160420javaweb之文件上传和下载

    一.文件上传 1.提供表单允许用户通过表单选择文件进行上传 表单必须是POST提交 文件输入框必须有name属性,只有有name属性的输入项浏览器才会进行提交 需要设置enctype属性值为multi ...