1.修改vue工程的index.html文件,参考代码为:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<!-- 关闭手机号码识别功能-->
<meta name="format-detection" content="telephone=no" />
<title>出差申请</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {//根据显示宽度调节html的font-size尺寸
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = Math.ceil(deviceWidth / 320 * 10) + 'px'
}
</script>
</html>
2.然后,组件就可以使用rem样式了~