nuxt3适配移动端

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;
                // 如果设计稿的尺寸不是 375，而是 750 或其他大小
                //rootValue({ file }) {
		        //	return file.indexOf('vant') !== -1 ? 37.5 : 75;
		      	//},
                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)
    }
})

参考