rem设置网页字体大小

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？

IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。

 

em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。

 

比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

 

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？

别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{font-size:62.5%; /* 10÷16=62.5% */} 
body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} 
p{font-size:14px;font-size:1.4rem;}

需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。

 

一个根据分辨率转换字体大小的demo

	/* 480x800 */
	@media screen and (max-width:480px){
	    html {font-size: 17px;}
	}
	/* 1136x640 */
	@media screen and (min-width:1136px) and (max-width:1280px){
	    html {font-size: 24px;}
	}
	/* 1280x720 */
	@media screen and (min-width:1280px) and (max-width:1334px){
		html {font-size: 26px;}
	}
	/* 1334x750 */
	@media screen and (min-width:1334px) and (max-width:1920px){
		html {font-size: 28px;}
	}
	/* 1920x1080 */
	@media screen and (min-width:1920px){
		html {font-size: 40px;}
	}

	/*
	'1920x1080' => 30px,
    '1334x750' => 21px,
    '1280x720' => 20px,
    '1136x640' => 18px,
    '480x800' => 13px,
    */
	#content{font-size: 0.75rem;}