1.rem简介
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
2.rem兼容性
rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法支持。
不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？可以针对低版本的IE浏览器做一定的处理：
- html { font-size: 62.5%; }
- body { font-size: 14px; font-size: 1.4rem; } /* =14px */
- h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
这样一来解决了IE低版本的不能兼容的问题，但生出另一个不足地方，就是增加了代码量。必竟鱼和熊掌很多时候不能兼得嘛。
3.rem使用
前面说了
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：
如果你要设置一个不同的值，那么需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%:
- html {
- font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
- }
相当于在<html>中设置font-size为10px。
4.例子：图片文字等等比缩放自适应
- <!DOCTYPE HTML>
- <html>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="jquery-1.7.1.min.js"></script>
- <title>home</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- border: 0;
- background: #fd3b36;
- font-family: Microsoft Yahei, Arial, sans-serif;
- overflow-x: hidden;
- }
- #mainpage {
- background: url(home.png) no-repeat;
- background-size: 100%;
- 6.4rem;
- height: 11.36rem;
- }
- #content {
- 5.5rem;
- font-size: 0.26rem;
- margin: 0 auto;
- padding-top: 4.4rem;
- color: #fff;
- line-height: 0.38rem;
- }
- #btn {
- text-align: center;
- }
- #btn img {
- 3.66rem;
- height: 0.96rem;
- margin-top: 0.64rem;
- }
- </style>
- <title>活动首页</title>
- <body>
- <div id="mainpage">
- <div id="content">在这个阖家团圆、祝福新年的节日，祝大家新年快乐，万事大吉，平平安安，羊年行大运，发大财。</div>
- <div id="btn">
- <img src="btn.png">
- </div>
- </div>
- <script>
- /*将根元素字号大小设置为：屏宽与图宽的比；
- 由于chrom对10px以下的字不再缩小，而且手机屏
- 都比较小，所以作为默认字体大小又乘了100，这样
- 计算其他元素大小时，量出图上大小再除以100就可以了*/
- function defaultfont() {
- var sw = $(window).width();
- var pw = 640;
- var f = 100*sw/pw;
- $('html').css('font-size', f+'px');
- }
- /*之所以要延时100ms再调用这个函数是因为
- 如果不这样屏幕宽度加载会有误差*/
- defaultfont();
- setTimeout(function(){
- defaultfont();
- }, 100);
- </script>
- </body>
- </html>