<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> html:root{font-size:62.5%;} body{font-size:.16rem;padding:0;margin:0;} span{font-size:1.6rem;height:10.5rem;width:10.5rem;display:block;background-color:#f60;} @media screen and (min-width:640px){ html:root{font-size:125%;} } </style> <body> <span>不同分辨率可能需要媒体查询写几次</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> html:root{font-size:625%;} body{font-size:.16rem;padding:0;margin:0;} span{font-size:.16rem;height:1.05rem;width:1.05rem;display:block;background-color:#f60;overflow:hidden;} @media screen and (min-width:640px){ html:root{font-size:1250%;} } </style> <body> <span>不同分辨率可能需要媒体查询写几次</span> </body> </html>
上述代码中的几乎是一样的，唯一的不同就是html:root中的font-size中62.5%与625%的区别，有什么分区呢？
通常情况下，一般浏览器中的默认的字体大小应该是16px，html:root中的字体大小就是根据 10 / 16 * 100 = 62.5，由此算来，文中的1.6rem便为16px了，但是有一个问题是必考虑到的，那就是，通常字体大小不支持12px以下的时候，那么就会出现一类问题：width:10rem != 100px（代码一）。
为了解决这样一个问题，所以我们则需要把html:root中的font-szie的比例放得更大，以达到让浏览器达到支持12px以下的基本单位的效果，此时width:1rem == 100px（代码二）。
原文：http://www.cnblogs.com/shusiwei/p/4721739.html