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 ui
import { 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;
 }

 

posted @ 2024-05-06 11:34  前端搬运工bug  阅读(603)  评论(0编辑  收藏  举报