//以下这个就是flexible.js
<script>
var docEl=document.documentElement,
//当设备的方向变化（设备横向持或众向持）此事件被触发，绑定此事件时，注意现在当浏览器不支持orientationchange事件的时候我们绑定了resize事件。总的来说就是监听当然窗口的变化，需要重新设置根字体的值
resizeEvt='orientationchange' in window ? 'orientationchange':'resize',
recalc=function(){
//设置根字体的大小
docEl.style.fontSize=20*(docEl.clientWidth/320)+'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt,recalc,false);
document.addEventListener('DOMContentLoaded',recalc,false);
</script>
//备注：100px约等于5rem（就这样大致计算吧100px=5rem）
下面给个例子试一试吧；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<title>历史预约</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/flexible.js"></script>
<style>
.width{width:100%;height:5rem;background: red;color:#ffffff;font-size:0.7rem}/*5rem相当于是100px;0.7rem相当于你14px*/
</style>
</head>
<body>
<div class="width">这是一个可以随便缩放的div</div>
</body>
</html>
