大屏自适应

2021-07-19 本文已影响0人岚平果

一、用vw、vh 实现大屏自适应

视口单位中的“视口”，PC端指的是浏览器的可视区域。

vw：1vw 等于视口宽度的 1%。若电脑屏幕分辨率为 1920px，则分成了100份 vw, 每个 vw 的 px 值为 19.2px;
vh：1vh等于视口高度的1%。若电脑屏幕分辨率为 1080px，则分成了100份 vh, 每个 vh 的 px 值为 10.8px;

这样我们就可以通过设计稿上面的 px 值得到 vw, vh 的值。如果设计稿上的一个 div 高为 360px，宽为 120px, 则我们可以在样式中写为如下

div{
  width: 360/19.2vw;    // 计算得出具体值，保留两位小数
  height: 120/10.8vh;  // 计算得出具体值，保留两位小数
}

二、transform: scale(X) 大屏自适应

具体见大屏自适应二：https://www.jianshu.com/p/ef64cf3b29f4

如下代码



<!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;}
        #scaleContainer{
            font-size: 36px; 
            transform-origin: 0 0;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    <div id="scaleContainer" class="scale-box" >
        <p style="font-size: 58px;">我是css缩放的容器，放在我里面的元素。子孙元素，都会缩放。我再说一遍，要缩放的元素，只要放在我里面就可以！</p>
        <div style="height: 850px;"></div>
        footer
    </div>

    <script>
        // 设计稿的宽度，这里我假设是1920px
        var desginWidth = 1920;
        var desginHeight = 920;
        document.getElementById('scaleContainer').style.width =  `${desginWidth}px`;
        document.getElementById('scaleContainer').style.height =  `${desginHeight}px`;

        function setScale() {
            // 这个是真实浏览器的宽度；手机上，电脑上，改变浏览器宽度都可以，就是最后浏览器展示内容的宽度
            var trueWidth = window.innerWidth;
            var trueHeight = window.innerHeight;
            // 计算设计搞和真实展示宽度的，比例
            var wScale = trueWidth / desginWidth;
            var hScale = trueHeight / desginHeight;
            var scale = Math.min(wScale, hScale);
            document.getElementById('scaleContainer').style.transform = `scale(${scale}) translate(-50%, -50%)`;
        }

        window.addEventListener('resize', setScale);
        setScale();


    </script>
</body>
</html>

大屏自适应

猜你喜欢

热点阅读