原生js实现可拖动宽度布局content="width=device-width, user-scalable=no,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,html{
            margin:0;
            padding:0;
            height:100%;
        }
        #box{
            width: 100%;
            height:500px;
            overflow:hidden;
            display: flex;
        }
        #left{
            width:calc(30% - 5px);
            height:100%;
            background:skyblue;
        }

        #resize{
            width:5px;
            height:100%;
            cursor: w-resize;
        }

        #right{
            width:70%;
            height:100%;
            background:tomato;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="left"></div>
    <div id="resize"></div>
    <div id="right"></div>
</div>
<script>
    window.onload = function(){
        var resize = document.getElementById("resize");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var box = document.getElementById("box");
        resize.onmousedown = function(e){
            var startX = e.clientX;
            resize.left = resize.offsetLeft;
            document.onmousemove = function(e){
                var endX = e.clientX;

                var moveLen = resize.left + (endX - startX);
                var maxT = box.clientWidth - resize.offsetWidth;
                if(moveLen<150) moveLen = 150;
                if(moveLen>maxT-150) moveLen = maxT-150;
                resize.style.left = moveLen;
                left.style.width = moveLen + "px";
                right.style.width = (box.clientWidth - moveLen - 5) + "px";
            }
            document.onmouseup = function(evt){
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        }
    }
</script>
</body>
</html>