CSS垂直三分是一種經(jīng)常用于設(shè)計(jì)響應(yīng)式布局（Responsive Web Design，簡(jiǎn)稱RWD）的技巧。它可以讓一個(gè)區(qū)域（比如頁(yè)面的Banner區(qū)域）在不同的設(shè)備上自適應(yīng)地顯示出一個(gè)固定的高度，同時(shí)將這個(gè)區(qū)域分成三等分。

.banner {
display: flex;
flex-direction: column;
height: 600px;
}
.content {
flex: 1;
}
.left, .right {
height: 33.33%;
}
@media screen and (max-width: 767px) {
.banner {
height: auto;
}
.left, .right {
height: auto;
}
}

在上述代碼中，我們首先將.banner元素設(shè)置為一個(gè)flex容器，并指定它的高度為600像素。然后，我們用flex的屬性來控制內(nèi)容區(qū)域（.content）和左右兩個(gè)等分的區(qū)域（.left和.right）的高度比例。這里，我們讓左右兩個(gè)區(qū)域的高度都為整個(gè).banner高度的三分之一，而內(nèi)容區(qū)域占據(jù)剩余的全部空間（因?yàn)樗膄lex值為1）。

在移動(dòng)端屏幕較小的情況下，我們通過@media查詢來將.banner的高度設(shè)置為自適應(yīng)，并且將左右兩個(gè)等分的區(qū)域的高度也設(shè)為自適應(yīng)。這樣，我們就可以在手機(jī)和平板等設(shè)備上，讓頁(yè)面的Banner區(qū)域自適應(yīng)并展現(xiàn)出我們希望的三段效果了。