css宽度自适应

/* CSS宽度自适应示例代码 */

/* 1. 使用百分比设置宽度 */
.container {
    width: 100%; /* 宽度为父元素的100% */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框在宽度之内 */
}

/* 2. 使用 max-width 和 min-width */
.responsive-box {
    max-width: 800px; /* 最大宽度为800px */
    min-width: 300px; /* 最小宽度为300px */
    width: 100%; /* 默认宽度为100% */
    margin: 0 auto; /* 居中显示 */
}

/* 3. 使用 flexbox 实现自适应布局 */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
}

.flex-item {
    flex: 1; /* 每个子项等宽分布 */
    min-width: 200px; /* 设置最小宽度 */
    margin: 10px;
}

/* 4. 使用 grid 布局实现自适应 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，每列最小宽度200px */
    gap: 10px; /* 列间距 */
}

解释说明：

1. 使用百分比设置宽度：通过将 width 设置为 100%，元素的宽度会根据父元素的宽度进行调整。box-sizing: border-box 确保内边距和边框不会超出指定的宽度。

2. 使用 max-width 和 min-width：这种方式可以确保元素的宽度在一定范围内变化，避免过宽或过窄。

3. 使用 Flexbox：Flexbox 是一种强大的布局方式，可以通过 flex: 1 让子元素自动分配剩余空间，同时通过 min-width 来限制最小宽度。

4. 使用 Grid 布局：Grid 布局非常适合创建响应式网格布局，repeat(auto-fill, minmax(200px, 1fr)) 表示自动填充列，每列最小宽度为 200px，最大宽度为均分剩余空间。