yarn add px2rem-loader
// 安装 postcss-px2rem
yarn add postcss-px2rem
在 vue.config.js 中添加配置
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
baseDpr: 2, // dpr基准
remUnit: 50, // rem 基准，由设计稿决定（1rem=50px）
remPrecision: 6 // rem 精确位数
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-1113</title>
</head>
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
var rootsize = 100 * (clientWidth / 750) + 'px';
if (clientWidth < 480) {
rootsize = 50 + 'px';
} else if (clientWidth === 480) {
rootsize = 75 + 'px';
} else if (clientWidth > 480 && clientWidth <= 960) {
rootsize = 100 + 'px';
} else if (clientWidth > 960 && clientWidth < 1440) {
rootsize = 150 + 'px';
} else if (clientWidth >= 1440) {
rootsize = 200 + 'px';
}
docEl.style.fontSize = rootsize;
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc()
})(document, window)
if (navigator.userAgent.indexOf('iPhone') > -1) {
window.onpageshow = function (event) {
if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
console.log('back')
window.location.reload()
}
}
}
</script>
<body>
<noscript>
<strong>We're sorry but vue-1113 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
网友评论