npm安装
npm i autoprefixer postcss postcss-pxtorem
nuxt.config.ts配置
export default defineNuxtConfig({
...
postcss: {
plugins: {
// 这个工具可以实现自动添加CSS3前缀
"autoprefixer": {
overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
},
'postcss-pxtorem': {
rootValue: 37.5, // 指定转换倍率,我现在设置这个表示1rem=37.5px;
propList: ['*'], // 属性列表,表示你要把哪些css属性的px转换成rem,这个*表示所有
mediaQuery: true, // 是否允许使用媒体查询,false媒体查询的代码可用,true不可用
exclude: 'ignore',
replace: true, // 替换包含rem的规则,而不是添加回退
minPixelValue: 1, // 需要转换的最小值,一般1px像素不转换,以上才转换
unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
selectorBalckList: ["van", 'el'], // 匹配不被转换为rem的选择器
},
},
},
})
/plugins/rem.ts
export default defineNuxtPlugin(() => {
if (process.client) {
// 屏幕适应
(function (win, doc) {
if (!win.addEventListener) return
function setFont() {
let screenWidth = document.querySelector('html')!.offsetWidth
const baseSize = 37.5
const pageWidth = 750
let fontSize = (baseSize * screenWidth) / pageWidth
document.querySelector('html')!.style.fontSize = `${
fontSize}px`
}
setFont()
setTimeout(() => {
setFont()
}, 300)
doc.addEventListener('DOMContentLoaded', setFont, false)
win.addEventListener('resize', setFont, false)
win.addEventListener('load', setFont, false)
})(window, document)
}
})