css设置自适应页面宽度

要设置自适应页面宽度，可以使用CSS的单位和属性。以下是一些常用的方法：

1. 使用百分比单位设置容器宽度

在CSS中，可以使用百分比单位来设置元素的宽度。例如，如果要让容器宽度自适应页面宽度，可以使用以下代码：

.container {
  width: 100%;
}

这将使容器的宽度等于其父元素的宽度，从而实现自适应页面宽度的效果。

2. 使用max-width属性限制容器宽度

另一种方法是使用max-width属性来限制容器的最大宽度。例如，如果要让容器的宽度在页面宽度小于800像素时自适应，但不超过800像素，可以使用以下代码：

.container {
  max-width: 800px;
  width: 100%;
}

这将使容器的宽度在页面宽度小于800像素时自适应，但不超过800像素。

3. 使用媒体查询设置不同的样式

如果需要根据不同的屏幕大小设置不同的样式，可以使用媒体查询。例如，如果要在页面宽度小于600像素时将容器宽度设置为100%，但在页面宽度大于600像素时将容器宽度设置为50%，可以使用以下代码：

.container {
  width: 100%;
}

@media screen and (min-width: 600px) {
  .container {
    width: 50%;
  }
}

这将使容器在页面宽度小于600像素时宽度为100%，但在页面宽度大于600像素时宽度为50%。