em,pt和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作为单位就行了。

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>
时间: 02-14

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

rem与px之间的换算(移动端)

最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素html,所以我们在使用的时候需要设置html的font-size值,内容大小就相对该值进行设置大小,比如,html的font-size为100px,内容的font-size想设置为20px,这换算为rem单位就是20/100=0.2rem.不过在开发中,html的font-size值会动态变化的,这样

CSS Font-Size: em、px 、pt 、Percent之间的关系及换算

一.基础介绍 1."Ems": em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , 16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em 2."Pixels": px,大小是固定的,称为绝对单位,在移动端的可访问性差 3.&quo

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

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当于

(转)CSS字体大小: em与px、pt、百分比之间的对比

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当

css中pt、px、em、ex、in等这类长度单位详细说明

在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等 也谈px和pt的区别 经常看到有人拿px和pt比较,主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时,用什么样的CSS长度单位更加好.有人说,用pt更好,因为pt是绝对长度单位,不会因为屏幕分辨率大小,或者其它因素而改变. 我去做了一个测试,写了这样一个HTML例子

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

html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸,国外使用比较多:pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用. html单位简短介绍: Px 像素Pixel:相对长度单位.Pt 点(Point):绝对长度单位Em 相对长度单位,这里em与html <em>标签的"E

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

html px em pt单位区(音乐床垫) 目录 认识3单位 html单位案例对比 单位换算 em单位介绍 推荐单位PX(像素) 关于px pt em总结单位 一.PX\EM\PT单位介绍 - TOP(音乐床垫) px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸,国外使用比较多:扩展阅读:html em标签,html em强调标签pt单位名称为点(Point),绝对长度单位一般老版本的table使用

PT与PX,em(%)区别

字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸.这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大.如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”.所以,“点”的大小是会“变”的,也称为“相对长度”.pt全称为point,但中文不叫“点”,查金山词霸可以看到,确切的

pt、px和em

pt.px和em都是网页中设置字体大小的单位. pt:点,point,确切的说法是一个专用的印刷单位“磅”,也称为“绝对长度”. px:像素,pixel,是相对长度,像素是相对于显示器屏幕分辨率而言的.常用于网页设计,直观方便 em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性. PX和PT转换的公式:pt=px乘以3/4. PX和em转换的公式:就是em=16乘以px