vite安装postcss-pxtorem+amfe-flexible进行移动端自适应

原创于 2021-12-11 15:24:57 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vite 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过安装并配置postcss-pxtorem和amfe-flexible，实现在移动端开发中快速将px单位转换为rem，以便于实现响应式布局。在main.js中引入amfe-flexible，在vite.config.js中设置postcss-pxtorem的相关参数，现在可以基于设计稿直接编写样式，简化了移动端适配过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装依赖走起

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

安装成功，我的相关版本是

"amfe-flexible": "^2.2.1",
 "postcss-pxtorem": "^6.0.0",

二、配置

在mian.js中引入amfe-flexible

import 'amfe-flexible'

在vite.config.js中配置postcss-pxtorem

import { defineConfig } from 'vite';
import postCssPxToRem from "postcss-pxtorem";

export default defineConfig({
    ...
     css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 75, // （设计稿/10）1rem的大小
                    propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                })
            ]
        }
    }
})

现在就可以根据设计稿的大小写样式啦，不用转换~~~