px 与 em 的区别及换算

liuliuab1

px 与 em 的区别及换算

为什么有时要使用 em?
　　字体单位应该用em而不用px，原因简单来说就是 支持 IE6 下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。　　
　　在调整的时候，发现不仅仅是字体，将行距 (line-height)，和纵向高度的单位都用 em。保证缩放时候的整体性。
　　怎么将 px 换成 em 呢？因为中文站用 px 的太多了，如果你是对代码不敏感的纯设计师，可以向技术人员或者页面制作人员请教：

em 为何物？
　　em 指字体高，任意浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: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 作为单位就行了。

em有如下特点：
　　1.em的值并不是固定的；
　　2.em会继承父级元素的字体大小。

重写步骤：
　　1.body 选择器中声明 Font-size=62.5%；
　　2.将你的原来的 p x数值除以 10，然后换上 em 作为单位；
　　简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为 em 的值不固定，又会继承父级元素的大小，你可能会在 content 这个 div 里把字体大小设为 1.2em,也就是 12px。然后你又把选择器 p 的字体大小也设为1.2em，但如果 p 属于 content 的子级的话，p 的字体大小就不是 12px，而是 1.2em=1.2*12px=14.4px。这是因为content 的字体大小被设为 1.2em，这个em值继承其父级元素 body 的大小，也就是 16px*62.5%*1.2=12px,而 p 作为其子级，em 则继承 content 的字体高，也就是 12px。所以 p 的 1.2em 就不再是 12px，而是 14.4px。
　　3.重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明，也就是避免以上提到的 1.2*1.2=1.44 的现象。比如说你在 #content 中声明了字体大小为 1.2em，那么在声明 p 的字体大小时就只能是 1em，而不是 1.2em,因为此 em 非彼 em，它因继承 #content 的字体高而变为了 1em=12px。

诡异的12px汉字(原因待查)
　　有人在完成 em 转换时还发现了一个诡异的现象，就是由以上方法得到的 12px(1.2em) 大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在body选择器中把 62.5% 换成 63% 就能正常显示了。原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗？
　　本现象只发生在 12px 的汉字，英文不存在此现象。

总结：
　　本文认为 em 已经过时了，没必要用 em，因为现在浏览器都升级到新版了。都支持 px 的放大了。

版权声明：               

本文由 德云社区 整理，原文来自网络。

liuliuab1

占用

liuliuab1

占用