網頁寬度在CSS中設置的方法

在CSS中設置網頁寬度是一個常見的需求，特別是在響應式設計中，要設置網頁的寬度，可以使用CSS的width屬性，這個屬性可以定義元素的***小寬度、***大寬度或固定寬度。

***小寬度（min-width）

***小寬度屬性用于設置元素的***小寬度，如果元素的寬度小于這個值，瀏覽器會自動調整元素的寬度，使其不小于這個值。

div {
  min-width: 200px;
}

***大寬度（max-width）

***大寬度屬性用于設置元素的***大寬度，如果元素的寬度大于這個值，瀏覽器會自動調整元素的寬度，使其不大于這個值。

div {
  max-width: 500px;
}

固定寬度（width）

固定寬度屬性用于設置元素的固定寬度，無論元素的原始大小如何，瀏覽器都會將其寬度設置為這個值。

div {
  width: 300px;
}

百分比寬度（%）

除了使用像素值，還可以使用百分比來設置元素的寬度，這允許元素根據其父元素的寬度按比例縮放。

div {
  width: 50%;
}

響應式設計中的寬度設置

在響應式設計中，通常使用媒體查詢（media queries）來根據屏幕大小的不同設置不同的寬度。

div {
  width: 100%;
}
@media (min-width: 600px) {
  div {
    width: 50%;
  }
}
@media (min-width: 900px) {
  div {
    width: 33.33%;
  }
}

在這個例子中，div元素的寬度在小于600px的屏幕上是100%，在600px到900px的屏幕上是50%，在大于900px的屏幕上是33.33%。