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

先看dom：

 1 <header>
 2     <input type="text" class="fat" placeholder="PX值">
 3 </header>
 4 <div class="box">
 5     <p>8.88888</p>
 6     <ul></ul>
 7 </div>
 8 <footer>
 9     <input type="text" class="son" placeholder="比值">
10 </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：

 1 <style>
 2 *{margin: 0;padding:0;}
 3 body{
 4 background: gray;
 5 }
 6 header{
 7 width: 100%;
 8 background: #000;
 9 height: 100px;
10 overflow: hidden;
11 }
12 header input{
13 width: 300px;
14 height: 50px;
15 text-align: center;
16 margin: 25px auto;
17 display: block;
18 font-size: 40px;
19 border:0;
20 outline: none;
21 }
22 .box{
23 width: 100%;
24 height: 800px;    
25 }
26 .box p{
27 width: 100%;
28 height: 200px;
29 line-height: 200px;
30 text-align: center;
31 font-size: 120px;
32 border-bottom:2px dashed green;
33 }
34 .box ul li{
35 width: 200px;
36 height: 30px;
37 float: left;
38 line-height: 30px;
39 background: #444;
40 color: #fff;
41 margin: 5px 5px;
42 overflow: hidden;
43 list-style: none;
44 font-size: 24px;
45 }
46 .box ul li span{
47 color: red;
48 width: 60px;
49 height: 30px;
50 line-height: 30px;
51 text-align: center;
52 display: inline-block;
53 float: left;
54 }
55 .box ul li b{
56 float: right;
57 width: 100px;
58 height: 30px;
59 line-height: 30px;
60 text-align: center;
61 display: inline-block;
62 color: #000;
63 font-weight: normal;
64 list-style: none;
65 }
66 footer{
67 width: 100%;
68 height: 100px;
69 position: fixed;
70 bottom: 0;
71 background: #000;
72 }
73 footer input{
74 width: 300px;
75 height: 50px;
76 text-align: center;
77 margin: 25px auto;
78 display: block;
79 font-size: 40px;
80 border:0;
81 outline: none;
82 }
83 </style>

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