js 调整自适应窗口

原创已于 2023-02-07 10:22:25 修改 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #css

于 2023-02-05 09:58:56 首次发布

自适应调节窗口专栏收录该内容

2 篇文章

订阅专栏

该代码段定义了一个CSS类`.container`，用于设置全屏背景并应用色彩滤镜。JavaScript部分则处理了页面的自适应宽度，根据窗口大小调整页面缩放比例，以保持设计稿的比例。同时，当窗口尺寸改变时，页面会自动刷新，确保布局始终适应新的窗口尺寸。这可能对响应式网页设计和ECharts图表的更新有帮助。

<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>