Vue3-Vite-TypeScript：屏幕适配rem

news2025/1/16 5:10:24

① 基于rem 适配（推荐，也是本篇要实现的方案）

适用场景：不固定宽高比的Web应用，适用于绝大部分业务场景

② 基于 scale 适配

适用场景：固定宽高比的Web应用，如大屏或者固定窗口业务应用

个人还是比较推荐基于rem适配屏幕方案的，就算是大屏，还得分个屏大屏小呢，更何况比例也经常不一致，4:3的，16:9的，我还见过3:2的呢，瞅着不就是个大电视吗？废话少说，撸起来....

安装依赖

rem适配方案主要用到三个依赖包：

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

//安装依赖
npm i postcss-pxtorem autoprefixer amfe-flexible -S

配置vite.config.ts

在vite.config.ts文件中引入对应依赖包，并配置代码如下（因为vite已经内联了postcss，所以并不需要再去创建什么postcss.config.js文件，直接在vite.config.ts中配置css即可）

//引入依赖
import autoprefixer from "autoprefixer"
import postcsspxtorem from "postcss-pxtorem"
 
//配置适配方案
css: {
  postcss: {
    plugins: [
      autoprefixer({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8",
          "last 10 versions", // 所有主流浏览器最近10版本用
        ],
        grid: true
      }),
      postcsspxtorem({
        rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
        propList: ["*", "!border"], // 除 border 外所有px 转 rem
        selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
      })
    ],
  },
}