cnpm i px2rem-loader --save-dev
exports.cssLoaders = function (options) {
...
<!--添加-->
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 100
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
- 重新运行即可，这里转换结果1rem =100px
动态计算根节点的font-size 和dpr
<html lang="zh-CN" ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta name="wap-font-scale" content="no">
<meta name="applicable-device" content="mobile">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover">
<title>二维码生成器</title>
<script type="text/javascript">(function () { var b = document.createElement("meta"); b.setAttribute("name", "viewport"); var c = window.devicePixelRatio, a = c ? 1 / c : 1; window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1); document.documentElement.setAttribute("data-dpr", c || 1); window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover") : b.setAttribute("content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover"); document.head.appendChild(b) })();</script><meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover">
<script type="text/javascript">var dpr = document.documentElement.getAttribute("data-dpr") || 1, width = document.documentElement.offsetWidth, fontSize = 100 / 750 * width; document.querySelector("html").style.fontSize = fontSize + "px"; window.addEventListener("resize", function () { var a = 100 / 750 * document.querySelector("html").offsetWidth; document.querySelector("html").style.fontSize = a + "px" });</script>
</head>