Vite项目怎么进行屏幕适配？

基于rem的适配方案

1、安装依赖

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

2、项目根目录创建 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: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
            propList: ["*", "!border"], // 除 border 外所有px 转 rem
            selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
        },
    },
};

3、main.ts/js 文件中导入依赖

import "amfe-flexible/index.js";

4、项目重启

 

基于scale的适配方案