1.首先安裝依賴: npm install postcss-px2rem
2.做一下尺寸的配置(在vue.config.js中配置)
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 75 // remUnit的值 === 設(shè)計(jì)稿 / 10 設(shè)計(jì)稿寬750px
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
3.pubilc下的index.html中,做適配
<script type="text/javascript">
function remRefresh() {
console.log('remRefresh()');
let clientWidth = document.documentElement.clientWidth;
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '16px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
let timeoutId = null;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
remRefresh()
}, 300)
})
</script>
以上為自我整理 ,如有不同觀點(diǎn),歡迎留言~
