zoukankan      html  css  js  c++  java
  • 大屏的计算scale适应当前电脑屏幕

     

    屏幕1   ------------------standardWidth = 1920

    <template>
      <div id="screen-inner" ref="screenInner" :style="`transform-origin: 0 0;overflow: hidden auto;background-color:${backgroundColor}`">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {}
      },
      computed: {
        backgroundColor () {
          return this.$route.name === 'screen' ? '#437ec7' : 'transparent'
        }
      },
      methods: {
        // 自动缩放大屏页面
        AutoSize() {
          let standardWidth = 1920
          let clientWidth = window.innerWidth
          let clientHeight = window.innerHeight
          let scale = clientWidth / standardWidth
          let screenInner = document.getElementById('screen-inner')
          screenInner.style.width = standardWidth + 'px'
          screenInner.style.transform = "scale(" + scale + ")"
          screenInner.style.height = clientHeight / scale + 'px'
        }
      },
      mounted() {
        window.addEventListener("resize", this.AutoSize)
        this.$nextTick(() => {
          this.AutoSize()
        })
      },
      destroyed() {
        window.removeEventListener("resize", this.AutoSize)
      }
    };
    </script>
    
    <style>
    </style>

    屏幕2-----------------

          let standardWidth = 2880
          let standarHeight = 810
    <template>
      <div id="screen-inner">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        // 自动缩放大屏页面
        AutoSize() {
          let standardWidth = 2880
          let standarHeight = 810
          let clientWidth = window.innerWidth
          let clientHeight = window.innerHeight
          let wscale = clientWidth / standardWidth
          let hscale = clientHeight / standarHeight
          let screenInner = document.getElementById('screen-inner')
          screenInner.style.transform = "scale(" + wscale + "," + hscale + ")"
        }
      },
      mounted() {
        window.addEventListener("resize", this.AutoSize)
        this.$nextTick(() => {
          this.AutoSize()
        })
      },
      destroyed() {
        window.removeEventListener("resize", this.AutoSize)
      }
    };
    </script>
    
    <style scoped>
    #screen-inner{
       2880px;
      height: 810px;
      overflow: hidden;
      transform-origin: 0 0;
    }
    </style>

    屏幕3-----------------------

          let standardWidth = 5760
          let standarHeight = 1620
    <template>
      <div id="screen-inner">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        // 自动缩放大屏页面
        AutoSize() {
          let standardWidth = 5760
          let standarHeight = 1620
          let clientWidth = window.innerWidth
          let clientHeight = window.innerHeight
          let wscale = clientWidth / standardWidth
          let hscale = clientHeight / standarHeight
          let screenInner = document.getElementById('screen-inner')
          screenInner.style.transform = "scale(" + wscale + "," + hscale + ")"
        }
      },
      mounted() {
        window.addEventListener("resize", this.AutoSize)
        this.$nextTick(() => {
          this.AutoSize()
        })
      },
      destroyed() {
        window.removeEventListener("resize", this.AutoSize)
      }
    };
    </script>
    
    <style scoped>
    #screen-inner{
       5760px;
      height: 1620px;
      overflow: hidden;
      transform-origin: 0 0;
    }
    </style>
  • 相关阅读:
    Entity Framework Code First 学习日记(1)精
    敏捷宣言
    VS2013中web项目中自动生成的ASP.NET Identity代码思考
    ReSharper 配置及用法
    MVC中的Repository模式
    关于Repository模式
    Entity Framework 学习总结之十一:POCO
    Linux Centos7 离线安装docker 【官网翻译和注释】
    企业服务总线ESB
    面向服务的架构SOA
  • 原文地址:https://www.cnblogs.com/soonK/p/14580245.html
Copyright © 2011-2022 走看看