美文网首页
大屏自适应(1920*1080)

大屏自适应(1920*1080)

作者: 萬wan事顺意 | 来源:发表于2022-03-10 15:39 被阅读0次

    html部分

     <div class="analysis"  id="analysis"></div>
    

    css部分

    body{
        background: #191b1e;
        height: 100vh;
        overflow: hidden;
      }
    .analysis {
        box-sizing: border-box;
        width: 1920px;
        height: 1080px;
        background: #191b1e;
        overflow: hidden;
        transform-origin: left top;
        transition: transform 0.2s;
      }
    
    

    js部分

     // 获取放大缩小比例
      screenScale(document.getElementById('analysis'));
      function screenScale(element) {
        let width = 1920;
        let height = 1080;
        let offsetWidth = window.innerWidth;
        let offsetHeight = window.innerHeight;
        let top = 0;
        let left = 0;
        let scaleX = offsetWidth / width;
        let scaleY = offsetHeight / height;
        let scale = Math.min(scaleX, scaleY);
        top = (offsetHeight - height * scale) / 2;
        left = (offsetWidth - width * scale) / 2;
        //核心代码
        const transform = 'translate('+left+'px,'+top+'px) scale('+scale+')'
        // `translate(${left}px, ${top}px) scale(${scale})`;
        element.style.width=width+'px';
        element.style.height=height+'px';
        element.style.transform=transform;
      }
      window.onresize = function () {
        screenScale(document.getElementById('analysis'));
      }
    
    

    相关文章

      网友评论

          本文标题:大屏自适应(1920*1080)

          本文链接:https://www.haomeiwen.com/subject/pqrtdrtx.html