摘要：
200像素；（function（）{functionc（）{vard=document.documentElement；d.style.fontSize=（20*（cw/375））>；false）；center；width&；&；doc.addEventListener（“DOMContentLoaded”；}（document；}*{margin；}<；height；
方案需求：
rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的根节点添加font-size 值。
使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size 值很繁琐，而且值也不能达到连续的效果。
就使用js动态计算给文档的fopnt-size 动态赋值解决问题。
设计稿以750为准。其中测试的设计稿中标注此div的750px;height:200px;
方案一：
<script type="text/javascript"> window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() { function c() { var d = document.documentElement; var cw = d.clientWidth || 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px'; } c(); return c; })(), false); </script> <style type="text/css"> html{font-size:10px} *{margin:0;} </style>
<div style="18.75rem;height:5rem;background:#f00;color:#fff;text-align:center;">
此时在iPhone6上测试，375px，也即100%。
此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。
</div>方案二：
<script type="text/javascript"> !(function(doc, win) { var docEle = doc.documentElement, //获取html元素 event = "onorientationchange" in window ? "orientationchange" : "resize", //判断是屏幕旋转还是resize; fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize，随着event的改变而改变。 }; win.addEventListener(event, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window)); </script>
<style type="text/css">
html {
font-size: 10px;
}
*{
margin: 0;
}
</style><div style="37.5rem;height:10rem;background:#f00;color:#fff;text-align:center;">
此时 1rem = 20px;将设计稿标注的宽高除以20即可得到rem的值。
</div>write by tuantuan