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: 0;padding:0;}
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:0;
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: 0;
background: #000;
}
footer input{
width: 300px;
height: 50px;
text-align: center;
margin: 25px auto;
display: block;
font-size: 40px;
border:0;
outline: none;
}
</style>

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