vue项目中实现网页整体随屏幕尺寸缩放亲测 真实有效

Posted 2022-01-28 水香木鱼

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用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 / 2px, 0)` : "";
             else 
              // 以宽度计算
              scale = docWidth / 1920;
              const shouleHeight = 1080 * scale;
              const offsetHeight = docHeight - shouleHeight;
              translate =
                offsetHeight > 0 ? `translate(0, $offsetHeight / 2px)` : "";
            
            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");
      
    );
  ,
;