全局px转rem

最新推荐文章于 2024-10-26 08:42:31 发布

原创最新推荐文章于 2024-10-26 08:42:31 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css

移动端开发需要用到rem作为开发单位

第一步

npm install postcss-pxtorem --save-dev //安装postcss-pxtorem

第二步

npm i -S  amfe-flexible

第三步

在main.js中引用

import 'amfe-flexible';
import 'amfe-flexible/index.js'//这个可以不用引入

第四步

在vue.config.js中进行配置

 css: {
        // css预设器配置项
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        // 忽略转换正则匹配项，插件会转化所有的样式的px。比如引入了三方UI，也会被转化.
                        //项目中有不需要自动转换成PX的样式，就在此添加，如: .vant  表示 .vant 开头的都不会转换
                        selectorBlackList: ['.tables'],
                        propList: ['*'], //属性的选择器，*表示通用
                        exclude: /douyin-weekend-activity/i,
                    }),
                ],
            },
        },
    },

第五步

在index.html中引入

 <meta
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
            name="viewport"
        />