在網頁設計中，畫面長度是一個很重要的概念，尤其是在響應式設計中更加顯得重要。CSS 中有很多屬性可以設置畫面長度，下面我們來詳細了解一下。

.normal {
width: 960px;
height: 600px;
}
@media screen and (max-width: 768px) {
.normal {
width: 100%;
height: auto;
}
}

CSS 中最基本的畫面長度屬性就是 width 和 height，我們可以把它們設置為一個具體的像素值，例如上面的示例中，我們設置 .normal 的寬度為 960px，高度為 600px。

但是當我們的網站在移動端瀏覽時，這種設置的畫面長度就顯得不太合適了，因為移動端的分辨率與桌面端差別很大，過長過寬的畫面長度會影響用戶的瀏覽體驗。

這時我們可以利用媒體查詢（@media）來設置不同分辨率下的畫面長度，如上面的代碼所示。在 max-width 為 768px 的情況下，我們把 .normal 的寬度設置為 100%，因為移動端的屏幕寬度一般都比較小，這樣可以使畫面長度自適應屏幕寬度。

除了 width 和 height，還有一些其他的屬性可以設置畫面長度，例如 max-width、min-width、max-height 和 min-height，它們可以表示最大寬度、最小寬度、最大高度和最小高度。

除了上述的常規屬性，CSS 還有一些比較新的屬性可以設置畫面長度，如 flex 和 grid 等等，這些屬性可以非常方便地實現自適應布局。

總之，深入了解畫面長度的各種屬性，能夠更好地實現響應式設計，提高用戶體驗。