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

最近新开一个项目是做公司前台的大屏展示，但我不知道屏幕的尺寸，所以考虑使用自适应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

一般都会使用蓝湖，摹客，figma这些产品设计与开发的协作工具，拿元素尺寸更方便，实际显示px是多大，写css的时候就写多大

如果不需要兼容较老的浏览器版本，可以把 autoprefixer 改为 {browsers: 'last 5 version'}

 2.安装PostCss依赖的插件autoprefixer，自动补全css浏览器前缀

yarn add autoprefixer

 PostCss 依赖 autoprefixer，不安装好像会报错，导致项目无法正常启动

3.安装 amfe-flexible 根据设备宽度，修改根元素html的大小，以适配不同终端

yarn add amfe-flexible -D

在 main.js 文件中引入

import ‘amfe-flexible/index.js’

 最后的package.json

 效果展示：

先随便写一个盒子元素

 它在600px的设备上的样式：

4. 解决报错

实际运行项目会报错 

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

如图

 跟随 learn more 链接查看问题所在，如图：

 

 autoprefixer会找自动找package.json内的browserslist选项，修改后如图：