使用display实现页面根据浏览器窗口大小自适应

思路:使用display:flex实现页面效果

<div class="container">
    
<div class="left"></div>
<div class="right"></div>
</div>

<style>
.container {
height:100vh;
display:flex;
flex-direction:row;
}

.left {
width:70%;
background-color:red;
}

.right{
width:30%;
background-color:pink;
}
</style>

代码之中使用 flex-direction:row实现了左右两个盒子得水平排列，然后width占据百分比进行分割，这样页面就会根据浏览器窗口大小的变化实时的调整自身大小宽度