前端界面缩放(自适应宽高)问题

﹏ヽ暗。殇╰゛Y 2022-09-07 14:52 281阅读 0赞

## 前端界面缩放(自适应宽高)问题 ##

话不多说直接上代码！！！！

--------------------

HTML 代码

//HTML 代码
    <body onload='init()'>
        <div class="all">
            <div class="header">
                </div>
           <div class="left">
                <div class="left_item">
                </div>
           </div>
           <div class="right">
           </div>
        </div>
    </body>

--------------------

CSS代码

html{ 
                width: 100%;
                height: 100%;
            }
            body{ 
                width: 1080px;
                height: 100%;
            }
            *{ 
                margin: 0;
                padding: 0;
                /*自动居中内容*/
                margin-left: auto;
                margin-right: auto;
            }
            .all{ 
                width: 100%;
                height: 100%;
                background-color: saddlebrown;
            }
           .header{ 
                width: 100%;
                height: 7%;
                background-color:salmon;
           }
           .left{ 
                width: 20%;
                height: 93%;
                background-color:seagreen;
                float: left;
           }
           .right{ 
                width: 80%;
                height: 93%;
                background-color:rgb(110, 46, 139);
                float: left;
           }
           .left_item{ 
                width: 80%;
                height: 50%;
                background-color:rgb(30, 28, 31);
                color: #fff;
           }

--------------------

JS代码

//body初始化事件
        //body标签加οnlοad='方法名()'
        //function 方法名(){ 
        // 初始化操作
        // }
    function init(){ 
        //获取显示器宽度
        var widths=window.screen.width;
        //body的宽与显示器一致(浏览器最大化的时候可以用)
        document.body.style.width=widths+'px';
        }
        //监听浏览器的宽度变化
    window.onresize=function(){ 
        //获取浏览器当前的宽度
        var innerwidths =window.innerWidth;
        //获取当前显示器的宽度(一般情况下显示器的宽度是不会变得的)
          var widths=window.screen.width;
          console.log(widths);
          //如果显示器宽度等于浏览器宽度那么这个情况大多数是最大化的时候
          if(innerwidths==widths){ 
              //所以直接把显示器的宽度赋给body
            document.body.style.width=widths+'px';
          }
        console.log(innerwidths);
        //如果浏览器的宽度不等于显示器的宽度时有两种情况
        // 第一种就是 缩小
        // 第二种就是 放大
        if(innerwidths!=widths){ 
      //先处理缩小的，因为浏览器在缩小的时候它的宽度会一直累加，这个时候浏览器宽度就大于显示器宽度了
            if (innerwidths>widths) { 
              //这里给body赋值是模拟缩小页面的操作，幅度不能太大，要不然有点奇怪
                document.body.style.width=innerwidths*10%-widths*10%+'px';  
                return;
            }
    
            //放大的操作就重新给body宽度赋显示器的宽度
            document.body.style.width=widths+'px';
        }
    }

--------------------

## 总结 ##

**子容器的百分比宽高是根据父容器的宽高来的。HTML>Body>\*>…其他标签.  
要实现一个功能有很多种方法，我也只是尝试做。欢迎给位大佬指点！！！**