HTML、css等比缩放，自适应，JS设置内容等比缩放、自适应

• 方法1：JS版本，动态设置

 
<template>
  <div  :style="{zoom:zoomVal}">


  </div>
</template>

<script>
  // 功能引入
  import {
    ref,
    toRefs,
    shallowRef,
    reactive,
    watch,
    watchEffect,
    getCurrentInstance,
    computed,
    defineComponent,
    nextTick,
    onMounted,
    onUnmounted,
    inject,
  } from 'vue'

 
  export default {
    name: "res",
    components: {
      
    },
    setup(props, {emit}) {
 
 
      // 数据
      const State = reactive({
       
        zoomVal: 0.96,//等比缩放值
      });

      // 方法
      const Function = reactive({
        // 设置缩放比
        setScale() {
          let devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
          let scale = devicewidth / 1920;  // 1920 —— 设计稿的尺寸
          State.zoomVal = Number(scale)
          console.log('zoomVal--->',State.zoomVal)
          // document.body.style.zoom = scale;//放大缩小相应倍数
        },
       

      })
      // 接口
      const Interface = reactive({})


      onMounted(() => {
        nextTick(() => {
          //todo 监听屏幕变化
          window.addEventListener('resize', function () {
            Function.setScale()
          })
        })
      })

      return {
        ...toRefs(State),
        ...toRefs(Function),
        ...toRefs(Interface),

      }

    }

  }
</script>

<style scoped lang="scss">
</style>

• 方法2：css设置

/* 默认样式，适用于1920分辨率及以上 */
body {
  font-size: 16px;
}
 
/* 当屏幕宽度小于1366像素时，进行缩放 */
@media screen and (max-width: 1366px) {
  body {
    /* 通过增加字体大小来实现缩放效果 */
    font-size: 14px;
  }
}
 
/* 更小分辨率下的调整 */
@media screen and (max-width: 1280px) {
  body {
    font-size: 12px;
  }
}
 
/* 更小分辨率下的调整 */
@media screen and (max-width: 1024px) {
  body {
    font-size: 10px;
  }
}