移动端适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<title>测试</title>
<script src="js/jquery.min.js"></script>
<script>
var fun = function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
//这里是假设在640px宽度设计稿的情况下，1rem = 24px；
//可以根据实际需要修改
docEl.style.fontSize = 24 * (clientWidth / 750) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
</script>
</head>
<body>
<div style="font-size: 1rem;background: red;height:1.5rem ;color: white;text-align: center;">测试</div>
</body>
</html>
