在vue-cli4中移动端的自适应：amfe-flexible和px2rem-loader

imHere·

于 2021-04-29 16:43:04 发布

阅读量332

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/qq_31403519/article/details/104299997

版权

vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中安装并配置px2rem-loader、amfe-flexible和postcss-px2rem，以便实现响应式设计，将像素单位转换为rem。主要步骤包括安装依赖、main.js引入amfe-flexible和vue.config.js的配置。

摘要由CSDN通过智能技术生成

1、首先在项目中安装以下依赖

npm install px2rem-loader --save
npm install amfe-flexible --save
npm install postcss-px2rem --save

2、在main.js中添加：

import 'amfe-flexible'

3、在vue.config.js中进行配置

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