在CSS中，視窗（Viewport）指的是網(wǎng)頁在瀏覽器中呈現(xiàn)的區(qū)域。視窗的大小和形狀取決于瀏覽器窗口或移動(dòng)設(shè)備屏幕的大小。通常，CSS樣式中的各種單位（如像素、百分比等）都是相對(duì)于視窗而言的。

/* 示例代碼 */
body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 60px;
background: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}

在上面的代碼中，我們可以看到樣式被設(shè)置為相對(duì)于視窗的大小進(jìn)行計(jì)算。其中，body元素的寬度和高度都被設(shè)置為100%。這表明body元素要占據(jù)整個(gè)視窗。

接下來，.header類定義了一個(gè)占據(jù)視窗寬度的頂部導(dǎo)航欄。我們可以看到它的高度被設(shè)置為60像素，并且背景色為灰色。

.container類定義了一個(gè)頁面主體的容器。它的寬度設(shè)置為80%。另外，它還有一個(gè)水平居中的margin屬性和20像素的padding屬性。

最后，我們定義了一個(gè)@media查詢，用于在視窗寬度小于768像素時(shí)重新設(shè)置.container類的樣式。在這種情況下，我們將它的寬度設(shè)置為100%、padding屬性設(shè)置為10像素，以適應(yīng)移動(dòng)設(shè)備上較小的屏幕。