宽高比例计算实现自适应屏幕

最新推荐文章于 2024-03-13 12:18:29 发布

Web阿成

最新推荐文章于 2024-03-13 12:18:29 发布

阅读量274

点赞数 10

分类专栏： Echarts 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/a_strong_pig/article/details/134830794

版权

Echarts 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

我们可以使用计算宽高比来实现屏幕的自适应性。

根据宽度和高度除以规定宽高的比例比较来决定使用scale缩放的边。通过监听窗口的变化来动态的通过缩放维持比例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        font-size: 50px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container">一个容器</div>
    <script>
      // 以 (1920,1080,1) 为基准
      // 宽度小于横纵比的时候 以宽度计算
      // 宽度大于横纵比的时候 以高度计算

      function change(selector, setWidth = 1920, setHeight = 1080) {
        // 获取元素
        const $ = document.querySelector(selector);
        // 获取屏幕宽高
        const { innerWidth, innerHeight } = window;
        // 获取屏幕宽高比
        const ww = innerWidth / setWidth;
        // 获取屏幕高度比
        const wh = innerHeight / setHeight;
        // 判断宽度是否小于规定比例，来决定使用宽度还是高度
        const scale = ww < wh ? ww : wh;
        // 设置样式
        Object.assign($.style, {
          position: "fixed",
          left: "50%",
          top: "50%",
          width: `${setWidth}px`,
          height: `${setHeight}px`,
          transform: `translate(-50%,-50%) scale(${scale})`,
          transformOrigin: "left top",
        });
      }
      // 设置body样式
      const resize = function () {
        change(".container");
      };
      resize();
      window.addEventListener("resize", resize);
    </script>
  </body>
</html>