vue 适配大屏页面整体缩放

原创已于 2024-02-01 19:09:51 修改 · 736 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2024-02-01 17:30:27 首次发布

文章介绍了如何在使用Element-UI时，由于弹框缩放问题，将自定义样式添加到body上，通过监听窗口大小调整，实现页面在不同分辨率下的响应式布局。

正常应该放在app.vue 里面。我这里因为用到element-ui 弹框无法缩放，所以加在body上面

    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

  var markDate = document.querySelector('body')
  var bodywidth = 1920
  var bodyheight = 1080
  let w = window.innerWidth / bodywidth;
  let h = window.innerHeight / bodyheight;
  markDate.style.cssText = `width:1920px; height: 1080px; transform: scaleY(${h}) scaleX(${w}) translate(-50%, -50%)`
    window.addEventListener('resize', (e) => {
      let x = window.innerWidth / bodywidth;
      let y = window.innerHeight / bodyheight;
      markDate.style.cssText = `width:1920px; height: 1080px; transform: scaleY(${y}) scaleX(${x}) translate(-50%, -50%)`
    })