vue 响应式页面使用transform实现

为了在 Vue 应用中实现一个响应式页面缩放功能，使页面能够根据屏幕大小自动进行缩放。通过监听窗口大小变化事件，并结合节流函数和 resize 函数，实现了页面元素的动态缩放效果。

但是希望页面缩放后尽量保持原样，所以使用了两套UI，1920和1024,根据页面缩放监听resize动态添加类名进行实现的响应式，因此封装了scss函数

在utils下新建resize.js

js 复制代码

// 屏幕按比例缩放
export default function (pageW, pageH, id,_scale) {
  const el = document.getElementById(id)
  el.style.cssText += `
            ;position: absolute;
            left: 0;
            top: 0;
            width: ${pageW}px;
            height: ${pageH}px;
            transform-origin: left top;
        `
  return function () {
    if (!el) return false

    const originW = document.body.clientWidth
    const originH = document.body.clientHeight
    const origeScale = originW / originH
    const bgScale = pageW / pageH
    // const _scale = origeScale > bgScale ? (originH / pageH) : (windowWidth / pageW)
    el.style['-webkit-transform'] = `scale(${_scale})`
    el.style.transform = `scale(${_scale})`
  }
}
export const scaleFunc = (pageW, pageH) => {
const originW = document.body.clientWidth
const originH = document.body.clientHeight
const origeScale = originW / originH
const bgScale = pageW / pageH
return origeScale > bgScale ? (originH / pageH) : (originW / pageW)
}

pageW 表示页面宽度当前设置的是设计稿1920的二倍
pageH 表示页面高度当前设置的是设计稿1080的二倍
id 表示要缩放的元素的 id
_scale 表示缩放比例

在utils下新建index.js

index.js 文件中定义了一个名为 throttle 的函数，用于实现函数节流的功能。该函数接收两个参数：fn 表示要执行的函数，delay 表示延迟时间。在函数内部使用闭包和 setTimeout 来控制函数的执行频率。

js 复制代码

// 节流
export const throttle = (fn, delay = 200) => {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn()
    }, delay)
  }
}

在main.js中引用

js 复制代码

import { throttle} from '@/utils/index'
import resize from "@/utils/resize";
changeScreen()
// 在屏幕大小变化时进行页面缩放操作
window.onresize = throttle(changeScreen)

function changeScreen () {
  setTimeout(() => {
    var windowWidth =
      document.documentElement.clientWidth || document.body.clientWidth
    var windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight

    let resizeFunc
    var is360 = _mime('type', 'application/gameplugin')
    let widthVal = windowWidth * 2
    let heightVal = windowHeight * 2

    // if (is360) {
    //   if (isChrome()) {
    //     widthVal = windowWidth * 1.9
    //     heightVal = windowHeight * 1.9
    //   }
    // }
    resizeFunc = resize(widthVal, heightVal, 'app', windowWidth / widthVal)

    resizeFunc()
  }, 100)
}

scss文件在styles下新建mixins.scss

scss 复制代码

//默认设计稿的宽度
$designWidth: 3840;
//默认设计稿的高度
$designHeight: 2160;


//px转为vw的函数

@function vw($px) {
  // 进行计算操作
  $result: ($px / $designWidth * 2) * 100;
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;

  @return #{$roundedResult}vw;
  
}


//px转为vh的函数

@function vh($px) {
  $result: ($px / $designHeight * 2) * 100;
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;
  @return #{$roundedResult}vh;
}
@function min_vw($px) {
  $result: ($px / 2048 * 2) * 100;
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;

  @return #{$roundedResult}vw;
}
@function min_vh($px) {
  $result: ($px / 1536 * 2) * 100;
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;
  @return #{$roundedResult}vh;
}

在vue页面设置样式

scss 复制代码

// 1920页面使用的样式
.box {
  width: vw(700*2);  ---- 700为设计稿给的宽度
  height: vh(836*2);
  font-size: vw(14*2); ---- 14为设计稿给的字体大小
  border-radius: vw(8*2); ---- 8为设计稿给的圆角大小
  margin-bottom: vh(20 * 2);
}
// 1024页面使用的样式 --- 动态判断页面宽度添加类名
.box-width {
  width: min_vw(700*2);  ---- 700为设计稿给的宽度
  height: min_vh(836*2);
  font-size: min_vw(14*2); ---- 14为设计稿给的字体大小
  border-radius: min_vw(8*2); ---- 8为设计稿给的圆角大小
  margin-bottom: min_vh(20 * 2);
}

mixins.scss具体引用：详见该篇文章Vue项目切换主题颜色（mixin + scss)