CSS（层叠样式表）中的自适应宽度是指网页元素（如容器、图片、文本等）能够根据浏览器窗口的大小变化而自动调整其宽度，以适应不同的显示设备，如手机、平板电脑和桌面电脑等。
实现自适应宽度通常涉及以下几个关键概念和技术：
1. 百分比宽度：使用百分比而不是固定像素值来设置元素的宽度。例如，`width: 80%;` 表示元素的宽度是其父元素的80%。
2. 响应式设计：使用媒体查询（Media Queries）来根据不同的屏幕尺寸应用不同的CSS规则。例如，可以使用`@media`规则来定义当屏幕宽度小于600px时，某些元素的样式。
3. Flexbox：弹性盒子布局（Flexbox）提供了一种更有效的方式来创建自适应的布局。它允许容器内的项目能够改变其宽度、高度（甚至顺序）以最佳方式填充可用空间。
4. Grid布局：CSS Grid布局提供了一种二维的布局系统，允许你以行和列的方式布局元素。它特别适合创建复杂的布局，并且能够适应不同屏幕尺寸。
5. Viewport单位：使用viewport单位如vw（视口宽度的百分比）和vh（视口高度的百分比）来设置元素的尺寸。例如，`width: 50vw;` 表示元素的宽度是视口宽度的50%。
6. 最大和最小宽度：使用`maxwidth`和`minwidth`属性来限制元素的宽度，使其在不同屏幕尺寸下保持一定的比例和布局。
7. 图像自适应：对于图像，可以使用`maxwidth: 100%;` 和 `height: auto;` 来确保图像宽度自适应容器宽度，同时保持其原始宽高比。
下面是一个简单的示例，展示如何使用百分比宽度和媒体查询来实现自适应宽度：
```css.container { width: 80%; margin: 0 auto; / 居中容器 /}
@media { .container { width: 95%; }}```
在这个例子中，`.container`类的宽度设置为父元素的80%，当屏幕宽度小于600px时，其宽度会增加到95%，以更好地适应小屏幕设备。
