在網頁設計中，常常會使用兩列布局，是頁面布局的一種常見方式，通常是將頁面分為左邊欄和右邊主內容區。利用CSS技術，我們可以很輕松地實現這樣的布局，并且讓其自適應屏幕大小。

下面是一個基本的兩列自適應布局的樣例：

.left{
float: left;
width: 25%;
background-color: #f2f2f2;
height: 500px;
}
.right{
float: left;
width: 75%;
background-color: #white;
height: 500px;
}

這段CSS代碼通過設置左、右兩個div的寬度比例，來實現了頁面兩列布局。左側div設置為25%，右側div設置為75%，用以顯示更多的頁面主要內容。通過在左側div中添加導航菜單、廣告等內容，可以豐富頁面布局。

但是，這段代碼還存在一些問題。它只能適應一定的屏幕寬度，當用戶改變窗口大小或使用不同分辨率的設備，頁面的顯示就會出現問題。

為了解決這個問題，我們可以在CSS中使用媒體查詢，讓頁面在不同的屏幕尺寸下顯示不同的布局。下面是一個例子：

@media screen and (max-width: 480px){
.left, .right{
width:100%;
height:auto;
}
}

在這個例子中，我們針對屏幕寬度小于等于480px的設備，重新定義了.left和.right的寬度。左右兩列的寬度都設置為100%，并且高度自適應，這樣可以在小屏幕下保證頁面正常顯示。

總之，使用CSS兩列自適應布局可以讓頁面更加美觀、有序、整潔。同時，合理使用媒體查詢等技術，可以保證頁面在不同的屏幕尺寸下都能夠良好的展現。