美文网首页
vue3.0移动端将px转换为rem

vue3.0移动端将px转换为rem

作者: 焚心123 | 来源:发表于2020-08-10 14:04 被阅读0次
    cnpm install amfe-flexible -S
    cnpm install postcss-pxtorem -D
    
    • 在main.js中进行引入
    //移动端rem适配
    import 'amfe-flexible/index' 
    
    • 记得移动端页面要在index.html中加入meta标签
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    
    • 在项目的根目录下创建一个vue.config.js文件
    module.exports = {
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        require('postcss-pxtorem')({ // 把px单位换算成rem单位
                            rootValue: 75, // 换算的基数(设计图750的根字体为75)
                            // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                            propList: ['*']//*代表将项目中的全部进行转换,单个转换如width、height等
                        })
                    ]
                }
            }
        },
        configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
            } else {
                // 为开发环境修改配置...
            }
        }
    }
    
    • 在重新启动项目就可以了,在项目中直接写px就可以,会自动的将px转换为rem的

    相关文章

      网友评论

          本文标题:vue3.0移动端将px转换为rem

          本文链接:https://www.haomeiwen.com/subject/sxcjdktx.html