PX转REM简易计算器（适用于fittext.js插件计算）

当你使用fittext.js插件时，通过量取的像素单位PX计算出REM单位值，是一件比较麻烦而繁琐的，为了提高工作效率，自己闲暇写了个小DEMO，现在给大家分享出来。

先看dom：

 <header>
     <input type="text" class="fat" placeholder="PX值">
 </header>
 <div class="box">
     <p>8.88888</p>
     <ul></ul>
 </div>
 <footer>
     <input type="text" class="son" placeholder="比值">
 </footer>

重点js：

<script src="http://apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
<script>
$(function(){
$(document).keypress(function (e) {
if (e.keyCode == 13){
var a=$(".fat").val();
var b=$(".son").val();
$(".box p").text(accDiv(a,b).toFixed(5));
$(".fat").val("");
$(".box ul").append('<li><span>'+a+'</span>px:<b>'+accDiv(a,b).toFixed(5)+'</b></li>')
}
})
});

function accDiv(arg1, arg2) {
var t1 = 0, t2 = 0, r1, r2;
try {
t1 = arg1.toString().split(".")[1].length;
}
catch (e) {
}
try {
t2 = arg2.toString().split(".")[1].length;
}
catch (e) {
}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}
</script>

最后是css：

 <style>
 *{margin:;padding:;}
 body{
 background: gray;
 }
 header{
 width: 100%;
 background: #000;
 height: 100px;
 overflow: hidden;
 }
 header input{
 width: 300px;
 height: 50px;
 text-align: center;
 margin: 25px auto;
 display: block;
 font-size: 40px;
 border:;
 outline: none;
 }
 .box{
 width: 100%;
 height: 800px;
 }
 .box p{
 width: 100%;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 120px;
 border-bottom:2px dashed green;
 }
 .box ul li{
 width: 200px;
 height: 30px;
 float: left;
 line-height: 30px;
 background: #444;
 color: #fff;
 margin: 5px 5px;
 overflow: hidden;
 list-style: none;
 font-size: 24px;
 }
 .box ul li span{
 color: red;
 width: 60px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 display: inline-block;
 float: left;
 }
 .box ul li b{
 float: right;
 width: 100px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 display: inline-block;
 color: #000;
 font-weight: normal;
 list-style: none;
 }
 footer{
 width: 100%;
 height: 100px;
 position: fixed;
 bottom:;
 background: #000;
 }
 footer input{
 width: 300px;
 height: 50px;
 text-align: center;
 margin: 25px auto;
 display: block;
 font-size: 40px;
 border:;
 outline: none;
 }
 </style>

本文系博主原创，转载请注明出处！