vite+vue3+element-plus项目ps改rem

最新推荐文章于 2025-05-07 14:55:59 发布

小识谭记

最新推荐文章于 2025-05-07 14:55:59 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/HurryUpp/article/details/124491017

本文介绍了如何通过npm安装并配置postcss-pxtorem和amfe-flexible，以实现跨设备的灵活布局。首先，我们安装了postcss-pxtorem用于将像素单位转换为rem，接着在postcss.config.js中设置了插件选项。随后，amfe-flexible被引入到main.js中，以适应不同屏幕尺寸。

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

安装postcss-pxtorem： npm i postcss-pxtorem -D
与package.json同级目录创建postcss.config.js文件

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
            unitPrecision: 5
        }
    }
}

安装 amfe-flexible: npm i amfe-flexible -D
main.js中引入: import ‘amfe-flexible/index.js’