CSS宽度自适应是指在各种屏幕尺寸下，元素的宽度能够自动调整，以适应不同分辨率和设备。

在CSS中，有几种常用的方法可以实现宽度自适应。

1. 百分比

使用百分比单位可以实现元素宽度的相对调整。例如，设置一个div元素的宽度为50%，它的宽度将会基于其父元素的宽度进行计算。

```css

div {

width: 50%;

}

```

2. *宽度

可以通过设置*宽度来限制元素的*宽度，然后使用百分比或其他单位来指定元素宽度。这种方法可以在大屏幕上保持元素的相对较大宽度，同时在小屏幕上自动调整宽度。

```css

div {

max-width: 1000px;

width: *;

}

```

3. 媒体查询

使用媒体查询可以根据不同的屏幕尺寸应用不同的CSS样式。通过定义不同的宽度规则，可以在不同尺寸的屏幕上使用不同的宽度设置。

```css

@media screen and (max-width: 600px) {

div {

width: *;

}

}

@media screen and (min-width: 601px) and (max-width: 1200px) {

div {

width: 50%;

}

}

@media screen and (min-width: 1201px) {

div {

width: 25%;

}

}

```

4. Flexbox

Flexbox是CSS中的一种布局方式，可以很容易地实现自适应的宽度。通过使用flex属性和flex-grow属性，可以根据容器的宽度和内容对子元素的宽度进行自动调整。

```css

.container {

display: flex;

}

.item {

flex: 1;

}

```

以上是几种常用的CSS宽度自适应的方法，可以根据具体的需求选择合适的方法。但需要注意的是，不同的方法适用于不同的场景，需要结合具体的布局和功能需求来进行选择。同时，还需要测试在不同设备和浏览器上的兼容性，确保宽度自适应效果的稳定性和一致性。