在進行響應式布局時，我們需要知道用戶設備的屏幕大小。CSS提供了幾種方法來計算屏幕大小。

第一種方法是使用視口單位。視口單位分為viewport width（vw）和viewport height（vh）。1vw等于視口寬度的1%。1vh等于視口高度的1%。

例如，如果我們要將某個元素的寬度設置為屏幕寬度的一半，可以這樣寫：

div {
width: 50vw;
}

這個元素的寬度將會是屏幕寬度的一半。

第二種方法是使用媒體查詢。媒體查詢可以根據屏幕寬度進行不同的樣式設置。

@media screen and (min-width: 768px) {
/* 屏幕寬度大于等于768px時應用的樣式 */
div {
width: 50%;
}
}

在這個例子中，當屏幕寬度大于等于768px時，\元素的寬度將會是屏幕寬度的一半。

第三種方法是使用JavaScript。使用JavaScript可以獲取屏幕寬度和高度，然后將其作為CSS樣式中的變量。

var screenWidth = window.innerWidth;
document.documentElement.style.setProperty("--screen-width", screenWidth + "px");

在這個例子中，我們將屏幕寬度保存在CSS變量--screen-width中，然后可以在樣式中使用它。

div {
width: calc(var(--screen-width) / 2);
}

使用CSS計算屏幕大小可以讓我們在響應式布局中更加靈活地設置樣式。無論使用哪種方法，都可以輕松地獲得屏幕寬度和高度，并根據需要進行相應的樣式設置。