【移动端】postcss-px2rem

gengboxb 264 0

基于vue-cli3

下载amfe-flexible

amfe-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size

cnpm install amfe-flexible -S

下载postcss-px2rem

postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件

cnpm install postcss-px2rem -S

在main.js里引入amfe-felxible

import 'amfe-flexible'

在vue.config.js文件里面配置postcss

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

发表评论 取消回复
表情 图片 链接 代码

分享