💌 作者简介

1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
2. 📜 CSDN主页：水香木鱼
3. 📑 个人博客：陈春波
4. 🎨 系列专栏：后台管理系统
5. 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

---

方案1、根据视口去做适配【推荐】

注意：必须在less 编译环境下 去使用，后续我会在留言区补充scss 环境下的配置

如果你想要在1366x768 和1920x1080 甚至更大的屏幕去看你的项目，可以选择如下方案

• 定义：@remvw:1366 / 100vw;
• 使用方式：

 宽度为1145 时，`把原有的px 替换成我们定义的类型 @remvw` 
 【如果是百分比 % 就不需要去替换了、 凡是带有px的 都要替换为@remvw】

更多请参考如下栗子：

<style lang="less" scoped>
//首先定义变量 @remvw
// 在1366的屏幕上除100%
//1vw = 可视窗口宽度的1%


@remvw:1366 / 100vw;

  .header {
    width: 1145/@remvw;
    height: 231/@remvw;
    background: #ffffff;
    box-shadow: 0/@remvw 0/@remvw 20/@remvw 0/@remvw rgba(57, 48, 160, 0.1);
    margin: 10/@remvw 0;
    .header-top {
      padding: 20/@remvw;
      height: 60/@remvw;
      border-bottom: 1/@remvw solid #e9eaed;
      // border-radius: 5/@remvw;
      p {
        margin: 0 0 0 10/@remvw;
        font-size: 15/@remvw;
        line-height: 21/@remvw;
        font-weight: 600;
        color: #424546;
      }
      .iStyle {
        width: 16/@remvw;
        height: 16/@remvw;
        margin-right: 5/@remvw;
        img {
          width: 16/@remvw;
          height: 16/@remvw;
          vertical-align: middle;
          margin-bottom: 3/@remvw;
        }
      }
    }
    .header-bom {
      width: 100%;
      height: 170/@remvw;
      display: flex;
      // justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 2/@remvw;
      #echarts {
        border-right: 1/@remvw solid #e9eaed;
      }
      .header-bom-list {
        width: 229/@remvw;
        height: 170/@remvw;
        text-align: center;
        align-items: center;
        p:nth-child(1) {
          font-size: 30/@remvw;
          font-weight: 400;
          color: #424546;
          margin-top: 36/@remvw;
        }
        p:nth-child(2) {
          font-size: 20/@remvw;
          font-weight: 600;
          color: #3930a0;
          line-height: 33px;
        }
        p:nth-child(3) {
          font-size: 16/@remvw;
          font-weight: 400;
          color: #666666;
        }
      }
      .header-bom-list:nth-child(3) {
        p:nth-child(2) {
          color: #ff5c3d;
        }
      }
      .header-bom-list:nth-child(4) {
        p:nth-child(2) {
          color: #ffb0e3;
        }
      }
      .header-bom-list:nth-child(5) {
        p:nth-child(2) {
          color: #f4df58;
        }
      }
    }
  }
</style>

---

方案2、 使用lodash插件

首先下载lodash插件。

npm i lodash -S

然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。

import _ from 'lodash'

然后给app容器挂上ref=“app”

<template>
    <div id="app" ref="app">
      <router-view />
    </div>
</template>

然后在mounted使用如下方法（其中的1080以及1920为定义的画布尺寸）：

<script>
import _ from "lodash";
export default {
  name: "App",
  mounted() {
    this.$nextTick(() => {
      const $app = this.$refs.app;
      // 设置 屏幕 百分比 尺寸 适配
      const standardScale = "100%" / "100%";

      window.addEventListener(
        "resize",
        _.debounce(function () {
          const docHeight = document.body.clientHeight;
          const docWidth = document.body.clientWidth;

          if (docWidth < 1680) {
            const currentScale = docHeight / docWidth;
            let [scale, translate] = [0, 0];
            if (currentScale < standardScale) {
              // 以高度计算
              scale = docHeight / 1080;
              const shouleWidth = 1920 * scale;
         
              const offsetWidth = docWidth - shouleWidth;
              translate =
                offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
            } else {
              // 以宽度计算
              scale = docWidth / 1920;
              const shouleHeight = 1080 * scale;
              const offsetHeight = docHeight - shouleHeight;
              translate =
                offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
            }
            console.log(translate);
            $app.style.cssText = `
            transform: scale(${scale}) ${translate};
            transform-origin: top left;
            min-width: 1920px;
            min-height: 1080px;
          `;
          } else {
            $app.style.cssText = "";
          }
        }),
        300
      );

      if (document.createEvent) {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
      } else if (document.createEventObject) {
        window.fireEvent("onresize");
      }
    });
  },
};

注意：

使用屏幕分辨率，可以解决全局适配问题，但是有一个弊端
不适用于响应式，根据你的项目需求去选择

---

📖 博主致谢

感谢大家阅读到结尾，本次的文章就分享到这里，总结了【vue后台管理做适配的最佳方案】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇

---

🛩往期精彩：

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

gitee【 码云】使用 Pull Request 功能进行代码审查的操作

git版本回退 三行命令完美解决

码云(gitee)配置ssh密钥的步骤？与解决git每次提交用户名的问题

如何使用csdn里的自定义模块管理专栏，看这一篇就够了。

gitee实现个人存放网络资源图片集vue公测版