CSS寬高剩余法是一種CSS布局技術，常用于響應式設計。它允許我們使用相對單位和百分比來定義元素的寬度和高度，使頁面在不同大小的設備上都能保持良好的布局。

在寬高剩余法中，我們使用百分比來定義元素的寬度和高度。但是，如果我們直接使用百分比，那么元素的大小將取決于其包含塊的大小。因此，我們需要使用寬高剩余法來解決這個問題。

.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(33.333% - 20px);
height: calc(50% - 20px);
margin: 10px;
}
@media screen and (max-width: 768px) {
.item {
width: calc(50% - 20px);
height: calc(33.333% - 20px);
}
}

在上面的示例中，我們使用了容器的寬度和高度為100%。這確保了元素的大小始終相對于其容器計算。我們還使用了flexbox布局，該布局使元素能夠輕松地對齊和分布。

在.item的CSS中，我們使用了calc（）函數來計算元素的寬度和高度。我們從33.333％中減去20像素，以考慮邊距和間隙。這使我們能夠得到每一行可以容納3個元素的布局。

在@media查詢中，我們對元素的寬度和高度進行了更改。當屏幕大小小于768px時，我們將元素的寬度和高度改為50％和33.333％，以適應屏幕大小。

總而言之，CSS寬高剩余法是一種非常有用的響應式設計技術。它使我們能夠輕松地創建靈活的布局，以適應不同大小的設備。如果您想要學習更多關于CSS布局技術，請繼續探究CSS Flexbox和Grid Layout。