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

最新推荐文章于 2024-12-18 22:00:00 发布

原创最新推荐文章于 2024-12-18 22:00:00 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

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

安装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’