vue3 个人自适应配置方案

``

使用插件  "postcss-pxtorem": "^6.1.0",

postcss.config.cjs 文件配置

module.exports = {  plugins: {    autoprefixer: {      overrideBrowserslist: [        "Android 4.1",        "iOS 7.1",        "Chrome > 31",        "not ie <= 11", //不考虑IE浏览器        "ff >= 30", //仅新版本用“ff>=30        "> 1%", //  全球统计有超过1%的使用率使用“>1%”;        "last 2 versions", // 所有主流浏览器最近2个版本      ],      grid: true, // 开启grid布局的兼容(浏览器IE除外其他都能兼容grid，可以关闭开启)    },    "postcss-pxtorem": {      rootValue: 100, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不转换，需要 / 75 转成 rem      unitPrecision: 2, // 计算结果保留 6 位小数      selectorBlackList: [".el", ".van", ".d-"], // 不进行px转换的选择器，不转换element的标签样式，根据自己项目需求来定义      propList: ["*"], // 可以从px更改为rem的属性  感叹号开头的不转换      replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性      mediaQuery: true, // 允许在媒体查询中转换px。      minPixelValue: 2, // 设置要替换的最小像素值。      exclude: /node_modules/i, // 排除 node_modules 文件(node_modules 内文件禁止转换)    },  },};

vite 文件配置

import { defineConfig ,loadEnv } from 'vite'import vue from '@vitejs/plugin-vue'import { resolve } from 'path'// 打包优化import viteCompression from 'vite-plugin-compression'// 按需引入 ui 和图标import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// 重点来了，官网是真坑，按需引入的icon不给示例。兜兜转转从按需导入icon的仓库代码里看到了i-ep前缀的写法。/* <i-ep-edit></i-ep-edit>  */import Icons from 'unplugin-icons/vite'import IconsResolver from 'unplugin-icons/resolver'// 按需引入 vant uiimport { VantResolver } from '@vant/auto-import-resolver'; // 版本提示import { webUpdateNotice } from '@plugin-web-update-notification/vite' // 按需自动加载api插件import AutoImport from "unplugin-auto-import/vite"; function pathResolve(dir) {  return resolve(__dirname, ".", dir);}   // https://vitejs.dev/config/export default defineConfig(({ command, mode }) => {  const env = loadEnv(mode, __dirname);  console.error('env :>> ',env);  return {      base:env.VITE_BASE,      plugins: [        vue(),        AutoImport({          imports: ["vue", "vue-router"],          resolvers: [            ElementPlusResolver(),            // 自动导入图标组件            IconsResolver({              prefix: 'Icon',          }),          ],        }),        Components({          resolvers: [            ElementPlusResolver({importStyle:"sass"}),            // 自动注册图标组件            IconsResolver({              enabledCollections: ['ep'],          }),          VantResolver()          ],        }),        Icons({          autoInstall: true,        }),        viteCompression({          threshold: 10240 // 对大于 1mb 的文件进行压缩        }),        webUpdateNotice({          versionType: 'build_timestamp',          notificationProps: {            title: '📢 系统更新',            description: '为了您更好的体验我们升级了系统，请您刷新页面体验最新版本,如需自己刷新,请使用shift加f5进行刷新',            buttonText: '刷新',            dismissButtonText: "忽略",          },        })      ],       server: {        host: '0.0.0.0',        proxy: {          '/api': {            // 测试            target: env.VITE_BASE_API,            changeOrigin: true,            rewrite: (path) => path.replace(/^\/api/, '')          },        },      },      resolve: {        alias: {          '@': pathResolve("src"),          '@components': pathResolve("src/components"),          '@api': pathResolve("src/api"),          '@layout': pathResolve("src/layout"),          '@utils': pathResolve("src/utils"),        }      },      css: {        preprocessorOptions: {          scss: {            // 自动导入定制化样式进行文件覆盖            additionalData: `            @use '@/assets/styles/element.scss' as *;            `,          }        }  }}})

css 文件样式

// xs：<768px 响应式栅格数或者属性对象，超小屏，比如手机。例如：{ span: 4, offset: 8 }// sm：≥768px 响应式栅格数或者属性对象，小屏幕，比如平板。例如：{ span: 4, offset: 8 }// md：≥992px 响应式栅格数或者属性对象，中等屏幕，比如桌面显示器。例如：{ span: 4, offset: 8 }// lg：≥1200px 响应式栅格数或者属性对象，大屏幕，比如大桌面显示器。例如：{ span: 4, offset: 8 }// xl：≥1920px 响应式栅格数或者属性对象，超大屏幕显示器，比如2k屏等。例如：{ span: 4, offset: 8 }// 类名为：// hidden-xs-only - 当视口在 xs 尺寸时隐藏// hidden-sm-only - 当视口在 sm 尺寸时隐藏// hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏// hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏// hidden-md-only - 当视口在 md 尺寸时隐藏// hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏// hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏// hidden-lg-only - 当视口在 lg 尺寸时隐藏// hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏// hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏// hidden-xl-only - 当视口在 xl 尺寸时隐藏// 手机/* prettier-ignore */@media screen and (max-width: 768Px) {    html {        font-size:  1rem!important;    }    body{        background: #FAFAFA !important;    }} //  mini/* prettier-ignore */@media screen and (min-width: 768Px) and (max-width: 992Px) {    html {        font-size: 14Px !important;     }      // 添加卡片      .addcard_box{        width: 9.375rem !important;        .smartScenes_slide_box{          width: 9.375rem !important;          height: 9.375rem !important;        }      }    //  方案设计    .schematicDesign_left_men {        height: 62vh !important;         .products_list {            padding-bottom: 4.6875rem !important;        }     }     //分享    .share {        width: 25rem !important;         .box_img {            height: 12.5rem !important;        }         font-size: .75rem !important;         .ewm_img {            width: 6.25rem !important;            height: 6.25rem !important;        }    }} //  平板/* prettier-ignore */@media screen and (min-width: 992Px) and (max-width:1200Px) {    html {        font-size: 14Px !important;     }    // 添加卡片    .addcard_box{      width: 9.375rem !important;      .smartScenes_slide_box{        width: 9.375rem !important;        height: 9.375rem !important;      }    }    // 方案设计    .schematicDesign_left_men {        height: 62vh !important;         .products_list {            padding-bottom: 6.875rem !important;         }    }    // 方案设计    .shoppingCartOnTheRight {        max-height: 62vh !important;        .productList{            max-height: 40vh !important;        }    }     //分享    .share {        width: 25rem !important;         .box_img {            height: 12.5rem !important;        }         font-size: .75rem !important;         .ewm_img {            width: 6.25rem !important;            height: 6.25rem !important;        }    } } //  pc端/* prettier-ignore */@media screen and (min-width: 1201Px) and (max-width:1920Px) {    html {        font-size: 18Px !important;     }    .schematicDesign {        font-size: 15Px !important;    }     // 4K     @media screen and (min-width: 1921Px) and (max-width:2560Px) {        html {            font-size: 20Px !important;        }    }} // 大屏/* prettier-ignore */@media screen and (min-width: 1922Px) {    html {        font-size: 22Px !important;    }}// 平板模式才触发// @media all and (orientation: portrait) {//   .landscape {//     position: absolute;//     transform: rotate(90deg) !important;//     transform-origin: 0% 0% !important;//     width: 100vh;//     height: 100vw;//     top: 0;//     left: 100vw;//   }// }// 公共背景.bg_main {  margin: 1.5rem;  padding: 1.25rem;  background: $fzcAntiWhite;  border-radius: 0.5rem;} /* 公共滚动条 *//* prettier-ignore */*::-webkit-scrollbar {    width: 4Px;    height: 4Px;    border-radius: 10Px;} *::-webkit-scrollbar-thumb {  border-radius: 10px;  background-color: #dddee0;} *::-webkit-scrollbar-track {  background-color: #ffffff;} * {  box-sizing: border-box;} body,html {  margin: 0;  padding: 0;  height: 100%;  background: #f4f5f4;  color: #1e1e1e;  overflow: hidden;} h1,h2,h3,h4,h5,h6 {  font-weight: normal;} ul,ol {  list-style: none;} img {  border: none;  vertical-align: middle;  border-radius: 0.5rem;  pointer-events: none;}.el-image {  border-radius: 0.5rem;}a {  text-decoration: none;} table {  border-collapse: collapse;  table-layout: fixed;} input,textarea {  outline: none;  border: none;} textarea {  resize: none;  overflow: auto;} .el-tooltip__trigger {  outline: none;} //.pdlr40 {  padding: 0 2.5rem;}// h5公共按钮样式.h5btn {  border-radius: 0.5rem;  padding: 0.9375rem;  color: #fff;  font-size: 1rem;  font-weight: 600;  display: flex;  align-items: center;  cursor: pointer;  justify-content: center;  background: linear-gradient(    135deg,    rgba(94, 160, 247, 1) 0%,    rgba(15, 113, 242, 1) 100%  );}/* prettier-ignore */.plugin-web-update-notice {    position: fixed;    left: 50%;    top: 50%;    user-select: none;    z-index: 99999;  }/* prettier-ignore */.plugin-web-update-notice-content-title {   font-weight: 500;   margin: 20Px 0;   font-size: 30Px;   line-height: 24Px; }/* prettier-ignore */.plugin-web-update-notice-content-desc {   font-size: 20Px;   margin-bottom: 20Px;   line-height: 30Px; }/* prettier-ignore */.plugin-web-update-notice-content {   background-color: #fff;   border-radius: 4Px;   color: #000000d9;   box-shadow: 0 3Px 6Px -4Px #0000001f, 0 6px 16Px #00000014, 0 9Px 28Px 8Px #0000000d;   padding: 8Px 16Px;   line-height: 1.5715;   width: 400Px;   position: fixed;   top: 20%;   right: 40%; }/* prettier-ignore */.plugin-web-update-notice-btn {  font-size: 16Px !important; }