zoukankan      html  css  js  c++  java
  • transform方法适配页面大小

    function setCss() {
          let App = document.getElementById("app"); // 获取到app节点 最外层的盒子
          let maxWidth = document.body.clientWidth / 1920; // 浏览器可见宽度
          // let maxHeight = document.body.clientHeight / 1080; // 浏览器可见高度
          // App.style.transform = `scale(${maxWidth},${maxHeight})`;
          App.style.transform = `scale(${maxWidth})`; // 设置缩小比例
          App.style.transformOrigin = "left top"; // 始终保持在左上
          App.style.backgroundSize = "100% 100%";
        }
     setCss() // 进入页面第一次调用
     window.onresize = function () { // 根据浏览器页面可视范围变化而变化
        setCss()
     }
     // 如果页面适配宽度变化比较小的可以用到这种方法,就相当于一张图片,你把他放大变小一样
     // 如果需要考虑高度的变化也可以用这个,但是变化范围都不要太大
     // 1920跟1080都是UI设计稿的宽高,根据实际情况设置
  • 相关阅读:
    实现进制转化伪代码
    XOR算法
    最大公约数算法
    To be a hacker
    20191310《信息安全专业导论》第四周学习总结
    浪潮之巅阅读感想
    20191310 李烨龙 《信息安全导论》第二周学习
    git安装心得
    计算机概论阅读
    学业优秀者经验展示
  • 原文地址:https://www.cnblogs.com/supermanYU/p/14473464.html
Copyright © 2011-2022 走看看