em,pt和px之间的换算
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于em,pt和px之间的换算的主要内容，如果未能解决你的问题，请参考以下文章