rem
1. 在 public文件夹的公共html添加配置
原理:在文件的根目录生成添加font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script>
(function (w) {
var doc = w.document;
var docEl = doc.documentElement;
var timer;
function refersh() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) {
width = 750;
}
var rem = width / 7.5;
docEl.style.fontSize = rem + "px";
}
w.addEventListener('resize', function () {
timer && clearTimeout(timer);
timer = setTimeout(refersh, 400)
})
w.addEventListener('pageshow', function () {
timer && clearTimeout(timer);
timer = setTimeout(refersh, 400)
})
})(window)
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
2.
vm
vue-cli 自动匹配vm, 使用第三方依赖包
postcss-px-to-viewport
在vue.config.js文件中配置:
const pxtovw = require('postcss-px-to-viewport')
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
new pxtovw({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/]
})
]
}
}
}
}