• 一、通用分辨率适配方案一
  • 1. 具体实现[以 vue + ant design 项目为例]

一、通用分辨率适配方案一

• 方案：以一种分辨率为基准，采用整体缩放的方式，来进行适配各个分辨率屏幕
• 缺点：只有在基准分辨率下才不会出现拉伸的场景，在其他的分辨下都会出现不同情况的拉伸，并且引起页面重绘。
• 优点：简单、粗暴、直接、基本兼容市面上各大屏幕尺寸。

1. 具体实现[以 vue + ant design 项目为例]

• 设置分辨率基准，App.vue 添加如下样式

  <style lang="less">
      html,
      body {
      width: 1920px !important;
      height: 1080px !important;
      overflow: hidden;
  }
  </style>

• 缩放代码

  function setAppScale() {
    const height = document.documentElement.clientHeight;
    const width = document.documentElement.clientWidth;
    const ratioY = height / 1080;
    const ratioX = width / 1920;
    const bodyDom = document.getElementsByTagName('body')[0];
    bodyDom.setAttribute("style", `
      transform: scale(${ratioX},${ratioY});
      transform-origin: left top;
    `)
  }
  window.addEventListener('resize', function(){
      setAppScale();
  });
  setAppScale();

• 需要解决的问题

  • tips提示需要使用 fixed 定位

    <template>
      <div class="tips-container">
        <div class="tool-tips" v-if="showTips">
          <span>{{ tipsContent }}</span>
        </div>
        <span
          class="auto-tips"
          @mouseenter="initTips"
          @mouseout="hideTips"
          ref="tips"
        >
          <slot />
        </span>
      </div>
    </template>
    
    <script>
    export default {
      name: "x-tool-tips",
      data() {
        return {
          showTips: false,
          tipsContent: "",
        };
      },
      methods: {
        hideTips() {
          this.showTips = false;
        },
        initTips() {
          const dom = this.$refs.tips;
          this.tipsContent = dom.innerText;
          const viewWidth = dom.clientWidth;
          const contentWidth = dom.scrollWidth;
          if (contentWidth > viewWidth) {
            this.showTips = true;
          } else {
            this.showTips = false;
          }
        },
      },
    };
    </script>
    
    <style scoped lang="less">
    .tips-container {
      width: 100%;
      .tool-tips {
        position: fixed;
        z-index: 9999;
        outline: none;
        span {
          display: inline-block;
          visibility: visible;
          line-height: 1.5;
          font-size: 14px;
          position: absolute;
          bottom: 0;
          left: 50%;
          z-index: 9999;
          width: fit-content;
          margin-left: -20px;
          margin-bottom: 10px;
          padding: 5px;
          color: #fff;
          background-color: #030c4e;
          box-shadow: 0 0.2rem 0.8rem rgba(255, 255, 255, 15%);
          -moz-border-radius: 4px;
          border-radius: 4px;
        }
      }
      .auto-tips {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
      }
    }
    </style>

  • 组件定位使用子绝父相
  • 抽屉组件采用 v-if 来控制显隐
  • 引入的第三方的 UI，针对的 body 和 html 设置的也会影响适配