PC端大部份是用px单位，小部分用em单位，而移动端，请全部用rem单位吧目前大部份设备，包括但不限于iOS 5 、Android 2.3 、Window Phone 8 都是可以兼容的，具体兼容表请看caniuse，我来为大家科普一下关于CSS3单位rem的用法和bug的解决办法?下面希望有你要的答案，我们一起来看看吧!
CSS3单位rem的用法和bug的解决办法
PC端大部份是用px单位，小部分用em单位，而移动端，请全部用rem单位吧。目前大部份设备，包括但不限于iOS 5 、Android 2.3 、Window Phone 8 都是可以兼容的，具体兼容表请看caniuse。
rem是什么意思呢？CSS手册上的说明：相对长度单位，相对于根元素（即html元素）font-size计算值的倍数。
rem用法很简单，就是根标签html设置文字大小后（不设置的话，大部份浏览器默认为16px），其他标签设置rem都是html大小的倍数。
html{ font-size: 10px; /* 设置html为10px */}h1{ font-size: 2rem; /* 10px*2=20px */}
那为什么移动端要使用em作为单位？一是我开始提到的，移动端大部份都支持，不需要考虑兼容问题；二是修改起来灵活。如果你要整个网页字体都变大两倍，直接修改html{font-size:20px}即可。当然还有人提到适合网页缩放，我从未用过这个功能。。。
你肯定会说，百度Google搜出来的文章，大部份是让设置为html{font-size:62.5%}。他的作用也是把html设置成10px，但万一哪个浏览器2b升级成默认文字大小不是16px怎么办？而且可以直接设置成10px，为什么要去用62.5%算成10px？这不是脱裤子放屁吗？所以我都是直接设置10px。
如果只介绍这点东西，网上一搜一大堆，我也就不会写这篇文章了。关键是大规模使用中遇到bug了，而且是蛋疼的原生Chrome。。。iOS平台的Chrome没问题，据说iOS里的所有浏览器都是壳。。。
bug 1：例如reset里并没有设置网站文字字号，所以我会在body里直接写font-size:1.2rem，让整个网页字号为12px。但在Android的Chrome里无效，还是按照16px来计算而不是我手动设置10px计算。所以要想给整个网页设置默认字号，最粗暴的办法就是直接在body里设置em或者px字号，例如body{font-size:1.2em}或者12px，推荐em。body直接继承html的字号，可以间接实现rem的功能。然后其他地方用rem是没问题的。
bug 2：因为Chrome设置了最小字号为12px，导致如果在宽高、行高、边距等地方用rem，虽然在html那设置了10px，但默认还是会按照12px来计算，所以实际会偏大。建议rem只是在字号上用比较好。
转载自西门的后花园
,
