借助于 postcss-px-to-viewportusage 使用方法

npm i -D postcss-px-to-viewport
我这里使用vite插件的引入方式
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: true
  },
  //在这配置插件内容
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          // 要转化的单位
          unitToConvert: 'px',
          // UI设计稿的大小
          viewportWidth: 1920,
          // 转换后的精度
          unitPrecision: 6,
          // 转换后的单位
          viewportUnit: 'vw',
          // 字体转换后的单位
          fontViewportUnit: 'vw',
          // 能转换的属性，*表示所有属性，!border表示border不转
          propList: ['*'],
          // 指定不转换为视窗单位的类名，
          selectorBlackList: ['ignore-'],
          // 最小转换的值，小于等于1不转
          minPixelValue: 1,
          // 是否在媒体查询的css代码中也进行转换，默认false
          mediaQuery: false,
          // 是否转换后直接更换属性值
          replace: true,
          // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          exclude: [],
          // 包含那些文件或者特定文件
          include: [],
          // 是否处理横屏情况
          landscape: false
        }),
      ]
    }
  }
})

之后在设置样式，对于px为单位的可以直接被转化为vw，从而达到适配不同屏幕的目的。

对于其他的单位 例如100%|rem，需要额外配置才可以处理【修改 unitToConvert: 'px' =》 unitToConvert: '%|rem'】,但是一次只能转换一个单位，没有说可以px|%|rem 这样同时生效的。

来一张效果图：

html&css代码:

<style lang="scss" scoped>
.myContainer {
    width: 1920px;
    height: 100%;
    div {
        position: absolute;
        width: 500px;
        height: 450px;
    }
}
$number: 6;
$base: 0;
//目前这种使用，可以做到适配屏幕，但是浏览器的缩放并不能适配，此时应该配合transform:scale的缩放来适配浏览器的缩放
@for $i from 1 through $number {
    .myContainer {
        div:nth-child(#{$i}) {
            @if($i ==1) {
                left: #{ $i * 150}px;
            }
            @else {
                left: #{$i * 200 + 300 * ($i - 1)}px;
            }
            top:50px;
            @if ($i > 3) {
                top: 450px;
                $i:$i - 3;
                 @if($i ==1) {
                    left: #{$i * 150}px;
                }
                @else {
                    left: #{$i * 200 + 300 * ($i - 1)}px;
                }
            }
        }
    }
}
style>

再来一张转换后的结果：

可以看到，只要是px单位，并且没有包含在下面配置中的类和属性，设置了单位为px的属性都会被转成视口单位vw，从而达到在不同屏幕下，适配不同屏幕，达到布局不变的效果

 // 能转换的属性，*表示所有属性，!border表示border不转
 propList: ['*'],
 // 指定不转换为视窗单位的类名，
 selectorBlackList: ['ignore-'],

但是需要注意的是，这样并不能达到适配浏览器缩放布局不变的效果，也就是下面的缩放操作

要达到浏览器缩放布局不变，需要通过动态设置容易的transform：scale来缩放整个页面内容，下次补上这个修改scale属性的适配方案