vite3+vue3 postcss-pxtorem 实现css自适应设备（px转rem）

原创

已于 2022-11-16 10:40:39 修改 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #postcss #vue

于 2022-11-13 17:38:12 首次发布

本文介绍了如何在Vite3+Vue3项目中利用postcss-pxtorem进行px转rem，实现CSS自适应。首先，通过yarn安装postcss-pxtorem，并在postcss.config.js中配置rootValue。接着，安装autoprefixer避免浏览器前缀问题。然后，引入amfe-flexible以适应不同终端。在main.js中引入并配置。在项目运行中可能会遇到autoprefixer关于browserslist的报错，需要在package.json中添加browserslist配置来解决。

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

最近新开一个项目是做公司前台的大屏展示，但我不知道屏幕的尺寸，所以考虑使用自适应css，这样只需要知道设计稿宽度就能适配任意尺寸的屏幕，达到一个1：1还原的效果，前提是设计稿长宽比和屏幕长宽比相等。

1.安装postcss-pxtorem

yarn add postcss-pxtorem -D

安装命令使用的yarn ,习惯使用npm或其他包管理工具的自行替换

package.json同级目录创建postcss.config.js文件

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

使用的时候就按照实际的项目改rootValue

比如我这张设计图宽度1240，那么我的rootValue就是 1240 / 10 = 124