不用再去找rem了，你想要的rem都在这

1、兼容性。

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem（大胆用吧，目前几乎全部手机浏览器都支持rem）

2、什么是rem。

rem是相对于根元素html字体大小来计算的，即( 1rem = html字体大小 )

3、使用rem布局有什么优势。

优势可大啦，他的强大可让你不在考虑不一样尺寸屏幕的手机，和制做PC端同样的写法，只须要设置好参数，就能够随心所欲了。

4、你可能会疑惑，但只要你看了这段JS后你会明白的，看不懂的小伙伴们，看了第五点的介绍你就会明白了。

很少说，上代码

1.  

   (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width>maxWidth && (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(750, 750);

    

5、给你们介绍下如何使用上面这段js和这段代码的意义。

1）用法很简单，只须要在html文件head最上面加入视口代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2）而后新建一个js文件夹，将咱们的佛祖和动态计算html字体大小的js代码放进去，而后在视口下面引入，就能够了，

3)使用过程当中，这段js代码有两个参数能够传入，这两个参数就是你的设计师给你的设计稿宽度，填上就能够了，

4)使用很简单，设计稿宽度除以100使用便可（例如：设计稿宽度300px = 3rem，采用的是除100来换算，从而使在使用过程当中更方便，无需使用rem单位换算工具）

5)rem不只仅能够用在移动端布局，还能够用在PC端上，

例如：设计师给了你内容宽度1200px以上的设计搞要你作自适应时，你彻底能够不用担忧，只须要量一下设计稿宽度，修改咱们js的两个参数修改成设计稿内容宽度便可。（提个醒，记得加上视口）

6)这段js主要是动态修改hrml字体大小，从而作到rem单位不动的状况下，自动适应全部手机端屏幕大小，想一下1rem在不一样宽度手机上的值都是不同的，是否是很完美呢。

 

7)此方法内有一段代码是能够修改的，修改成屏幕高度会有意想不到的效果，你们能够自我思考一下。

var width = docEl.getBoundingClientRect().width;//这段代码可修改

6、在用rem的时候可能会遇到点小坑，下面小编给你们列出来几个经典的。

1)border:0.01rem solid #ccc;  边框的0.01rem在手机上会看不见，因此边框的0.01rem建议使用1px替代。

2)background-size使用rem无效，建议：修改背景图大小不要卡死，使用百分比去控制，好比background-size: 100% auto;等

在你看完这篇文章以后，若是以为对您有帮助，谢谢关注