功能说明：以一个640px的宽度为基准，最小不低于320px，当大于640px时，让其在页面中居中。
如果正处于640 - 320之中的，都按照js进行等比例的缩放。
这里我们规定1rem = 100px
--------------------------------------------------------------------------------------------------------
代码：
function Rem(){
var radio = function(){
var r = document.documentElement.clientWidth / 6.4;
return r>=100?100:r<=50?50:r;
}
document.documentElement.style.fontSize = radio() +'px';
window.addEventListener('resize',Rem,false);
}
调用代码：
Rem();
应用举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width" />
<title>phone</title>
<script>
function Rem(){
var radio = function(){
var r = document.documentElement.clientWidth / 6.4;
return r>=100?100:r<=50?50:r;
}
document.documentElement.style.fontSize = radio() +'px';
window.addEventListener('resize',Rem,false);
}
Rem();
</script>
<style>
*{margin:0px;padding:0px;list-style:none;}
.wrap{width:100%;max-width:640px;min-width:320px;margin:0px auto;}
.box,.box ul{width: 100%;background:#eee;}
.box li{width: 1rem;height: 1rem;background:red;margin:0px auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>