本文目錄導(dǎo)讀：

1. 使用百分比單位
2. 使用CSS媒體查詢
3. 使用視窗單位（vw、vh）

CSS實現(xiàn)Div隨窗口縮放功能的方法

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要讓某些元素（如div）隨著瀏覽器窗口的縮放而自動調(diào)整大小，這種功能對于提高用戶體驗和網(wǎng)頁響應(yīng)性***關(guān)重要，本文將介紹如何通過CSS實現(xiàn)這一功能。

使用百分比單位

一種常見的方法是使用百分比（%）單位來定義div的尺寸，使用百分比來設(shè)置div的寬度和高度，這樣當窗口大小變化時，div的大小也會相應(yīng)地調(diào)整。

div {
  width: 50%;  /* 設(shè)置寬度為窗口寬度的50% */
  height: 100%; /* 設(shè)置高度為窗口高度的100% */
}

使用CSS媒體查詢

CSS媒體查詢允許我們根據(jù)設(shè)備的特定條件（如窗口寬度）來應(yīng)用不同的樣式規(guī)則，我們可以使用媒體查詢來定義不同窗口大小下的div尺寸。

div {
  width: 80%; /* 默認寬度 */
  height: auto; /* 高度自適應(yīng) */
}
/* 當窗口寬度小于600px時 */
@media (max-width: 600px) {
  div {
    width: 100%; /* 調(diào)整寬度以適應(yīng)小屏幕設(shè)備 */
  }
}

使用視窗單位（vw、vh）

視窗單位是一種相對單位，允許我們定義一個長度為視窗的一部分，vw代表視窗寬度的百分比，vh代表視窗高度的百分比，使用這些單位可以讓div隨窗口大小變化而自動調(diào)整尺寸。

div {
  width: 50vw; /* 設(shè)置寬度為視窗寬度的50% */
  height: 20vh; /* 設(shè)置高度為視窗高度的20% */
}