CSS比例布局是在網頁中設置布局的一種辦法，它可以使網頁在不同設備上呈現出一致的視覺效果。最常用的比例布局就是“長寬比”布局，即利用padding-top屬性設置占父元素寬度的百分比來實現比例布局。下面通過代碼演示CSS比例布局的實現過程：

/* HTML代碼 */
<div class="container">
<div class="box">這里是內容</div>
</div>
/* CSS代碼 */
.container {
position: relative;
width: 100%;
padding-top: 100%; /* 長寬比 1:1 */
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
text-align: center;
line-height: 150%;
font-size: 24px;
}

在上面的代碼中，我們先創建了一個父元素類名為“container”的div，它的寬度設置為100%，然后給它設置了一個padding-top為100%，這里的百分比可以根據實際需求進行調整。

接下來，我們創建了一個子元素類名為“box”的div，并設置了它的位置為絕對定位（position:absolute），然后設置左上角坐標為0，寬度和高度均為100%。這樣，在“container” div中添加任何內容都可以自適應窗口大小并保持1:1的長寬比。

通過CSS比例布局，我們可以輕松地實現網頁的響應式設計。不管是在PC端、平板還是手機上，網頁都可以自適應設備屏幕大小并呈現出較好的視覺效果。