网页CSS font-size使用em替代px

px和em都是长度单位，区别是，px的值是固定的，em的值是相对的，并且em会继承父级元素的字体大小。

任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

为了简化计算，在css中的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

 

引自：http://www.w3.org/Style/Examples/007/units

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

	Rec­om­mended	Oc­ca­sional use	Not rec­om­mended
Screen	em, px, %	ex	pt, cm, mm, in, pc
Print	em, cm, mm, in, pt, pc, %	px, ex

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

从上面可以看出，不管屏幕输出或是打印，都推荐的em在其中，px反而在打印中不推荐。

使用em相对大小的另一个好处是，使js改动整个网页字体大小非常方便，只需要改变根结点body的font-size，整个网页的文字大小都变了。

	<script type="text/javascript">
	var defaultSize=62.5;
	$(function(){
		$("#btnChangeFontSize").click(function(){
			defaultSize+=10;
			$("body").css("font-size",defaultSize+"%");
		});
	});	
	</script>

 

调试时发现最新版的chrome中，当字体大小小于12px时，它默认就换成12px了，解决办法是添加css: body {-webkit-text-size-adjust: none; }

 

 tests/index.html

 https://files.cnblogs.com/wucg/demo-blueprint-css.zip