隨著移動設備的普及，網站在不同屏幕尺寸上顯示的效果也愈發重要。CSS 響應式設計技術正是應對這一需求而生的，它能夠使網頁在各種屏幕大小上呈現出更好的效果。

CSS 響應式設計技術的一個實際應用就是三列布局。三列布局的主要特點是，網頁內容被分為三列，左右列分別用于側邊欄，中間列用于主要內容。這種布局在大屏幕上看起來美觀大方，而在小屏幕上則能適應設備寬度，阻止內容重疊。

下面是一個基本的三列布局 CSS 代碼：

.container {
display: flex;
flex-wrap: wrap;
}
.container .left,
.container .right {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
.container .middle {
width: 50%;
padding: 10px;
box-sizing: border-box;
}

上述代碼首先定義了一個容器，將左、中、右三列放在容器中。使用display: flex;可以讓容器中的子元素排列成一行。然后通過flex-wrap: wrap;設置子元素跨行，也就是當屏幕寬度不夠時自動折行至下一行。

.left 和 .right 元素的寬度設置為 25%，.middle 元素的寬度設置為 50%。這是因為左右兩列各占屏幕寬度的 25%，中間列占屏幕寬度的 50%。

接下來，通過box-sizing: border-box;可以讓 padding 值直接計算在元素的寬度內。這是因為默認情況下 padding 值并不計入元素的寬度或高度中，這會導致當元素的寬度或高度固定時，padding 值會撐大元素而使其寬度或高度超出預期，從而破壞布局。

綜上所述，CSS 響應式設計技術的應用為網頁布局的適應性提供了有效的解決方案。三列布局是其中的一種常見實例，通過設置容器和子元素的寬度比例和 padding 值等參數，可以大大增加網頁在不同屏幕尺寸下的可讀性和美觀度。