vue配置px自动转rem

最新推荐文章于 2025-10-10 19:15:00 发布

原创最新推荐文章于 2025-10-10 19:15:00 发布 · 809 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何通过npm安装postcss-pxtorem和lib-flexible，然后在vue.config.js中配置px转rem转换，并创建rem.js文件动态设置根字体大小，最终在main.js中引入实现移动端适配。该方法适用于前端开发中的响应式布局。

首先安装
npm install postcss-pxtorem --save-dev 或者 npm install postcss-pxtorem -D
npm install lib-flexible --save

然后在vue.config.js中配置

module.exports = {
    css: {
        // 是否开启支持 foo.module.css 样式
        requireModuleExtension: true,
        // css预设器配置项
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 18.75, // 换算的基数
                        propList: ['*']
                    })
                ]
            }
        }
    }
}

然后新建rem.js文件

rem.js内容

//rem.js
// 设置 rem 函数
function setRem() {
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
        // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / 20 + 'px'
}
// 初始化
setRem()
    // 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}