本文目錄導讀：

1. 設置窗口寬度和高度
2. 使用百分比或視窗單位
3. 響應式設計

CSS如何設置窗口大小

在現代網頁設計中，使用CSS（層疊樣式表）來控制窗口大小是一種常見的做法，通過合理地設置窗口大小，我們可以確保網頁在各種設備上都能良好地展示，本文將詳細介紹如何使用CSS來設置窗口大小。

設置窗口寬度和高度

在CSS中，我們可以通過設置元素的寬度和高度屬性來調整窗口大小，這通常應用于包含內容的容器元素，如div、section等。

.container {
  width: 800px;  /* 設置窗口寬度 */
  height: 600px; /* 設置窗口高度 */
}

使用百分比或視窗單位

除了使用固定的像素值，我們還可以使用百分比或視窗單位（vw、vh）來設置窗口大小，以適應不同的屏幕尺寸。

.container {
  width: 100%;  /* 窗口寬度占滿整個屏幕 */
  height: 50vh; /* 窗口高度占據視窗高度的50% */
}

響應式設計

為了實現響應式布局，我們可以使用媒體查詢（Media Queries）來根據屏幕大小調整窗口大小。

.container {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .container {
    width: 800px; /* 在屏幕寬度大于768px時，設置窗口寬度為800px */
  }
}

通過CSS，我們可以輕松地設置窗口大小，以適應不同的設備和屏幕尺寸，我們可以使用像素值、百分比或視窗單位來設置窗口的寬度和高度，并使用媒體查詢來實現響應式布局，合理地設置窗口大小對于提高網頁的用戶體驗和可訪問性***關重要。