js 调整自适应窗口

<style>
.container {
  position: absolute;
  width: 2560px;
  height: 1080px;
  background: rgba(5, 11, 22, 1);
  overflow-x: hidden;
  transform-origin: 0px 0px;
  filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%)
    opacity(100%) grayscale(0%);
}
</style>
<div class="container"></div>

<script>






  $(function () {


    /**
     *
     * 自适应宽度处理
     * 通过当前网页具体宽高 / 设计稿画板实际宽高 得到比例最终缩放页面
     *
     * 如果是同比例，比如12:9的尺寸比例，不管分辨率多大，都是能完全适应且不会被拉伸
     * 如果不是在同一比例，简单来就像图片改变了比例就会被拉升
     *
     * 具体大小可自行设置，下面这句话也可以不要，修改style.css样式也可以，方法很多
     *
     */

    document.getElementsByClassName("container")[0].style.transform = `scale(${window.innerWidth / 2560})`









    /**
     *
     * 窗口发生改变自动刷新页面
     * 这样做不太友好，一般做法当前页面大小发生改变去重新加载echarts对象
     * 最好自行修改一下，当然。不要也可以，不会影响功能使用
     *
     */

    // jq窗口发生改变自动刷新页面
    $(window).resize(() => location.reload())
    // js窗口发生改变自动刷新页面
    window.onload = function () {
      function rand() {
        span = document.getElementById('span');
        i = Math.random() * 5;
        span.innerHTML = i;
      }
      window.onresize = function () {
        window.location.reload();
        rand();//窗口改变执行函数
      }
      rand();//打开页面先进行函数执行
    }

  })
</script>
js 调整自适应窗口

悦读
