vue适配移动端字体

1、需要安装插件

 npm i amfe-flexible --save

npm i postcss-px2rem –save

2、在index.html中设置meta标签：

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

3、修改vue.config.js文件（没有则在根目录自己创建）

module.exports = {
    lintOnSave: false,
    publicPath: "./",
    outputDir: process.env.VUE_APP_DIR,
    css: {
        loaderOptions: {
            //对应适配
            postcss: {
                // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
                plugins: [
                    require("postcss-px2rem")({
                        remUnit: 37.5 
                    })]
            },
            sass: {
                prependData: `
                @import "@/assets/common/common.scss";
                @import "@/assets/common/icon.scss";
                `
            }
        }
    },
}

 修改不起作用，需要重启服务

4、修改main.js ，加入：import 'amfe-flexible'

最后效果：

 

标签：vue,amfe,适配,字体,common,import,flexible,postcss
来源： https://blog.csdn.net/qq_41687299/article/details/115463490