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

1. 使用百分比寬度
2. 使用CSS的flexbox布局

CSS設(shè)置div寬度自適應(yīng)屏幕大小的方法

在現(xiàn)代網(wǎng)頁設(shè)計中，我們經(jīng)常需要讓某些元素（如div）的寬度能夠自適應(yīng)屏幕大小，以便在各種設(shè)備和瀏覽器窗口大小上都能提供良好的用戶體驗，下面我們就來探討如何使用CSS來實現(xiàn)這一目標(biāo)。

使用百分比寬度

我們可以將div的寬度設(shè)置為一個百分比值，這樣div的寬度就會根據(jù)其父元素的寬度自動調(diào)整。

div {
  width: 80%; /* 根據(jù)屏幕大小自動調(diào)整寬度 */
}

使用CSS的flexbox布局

Flexbox是一種靈活的布局方式，可以輕松實現(xiàn)元素的自適應(yīng)布局，我們可以將父元素設(shè)置為flex容器，然后讓子元素（如div）自動適應(yīng)容器的寬度。

.container {
  display: flex; /* 設(shè)置為flex容器 */
}
.div {
  flex: 1; /* 子元素自動適應(yīng)容器寬度 */
}

三. 使用媒體查詢（Media Queries）進(jìn)行響應(yīng)式設(shè)計

我們還可以利用媒體查詢根據(jù)屏幕大小調(diào)整div的寬度，我們可以為不同的屏幕寬度設(shè)置不同的寬度值，這樣，在不同的屏幕尺寸下，div的寬度可以自動調(diào)整。

div {
  width: 100%; /* 在小屏幕上全寬顯示 */
}
@media screen and (min-width: 600px) {
  div {
    width: 70%; /* 在中等屏幕下調(diào)整寬度 */
  }
}
@media screen and (min-width: 1024px) {
  div {
    width: 50%; /* 在大屏幕上再次調(diào)整寬度 */
  }
}

就是使用CSS設(shè)置div寬度自適應(yīng)屏幕大小的一些常見方法，在實際應(yīng)用中，我們可以根據(jù)具體需求和場景選擇合適的方法來實現(xiàn)自適應(yīng)布局。