css自适应布局

/* CSS 自适应布局示例 */

/* 使用百分比宽度实现自适应 */
.container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 使用 Flexbox 实现响应式布局 */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex: 1;
    min-width: 200px;
    margin: 10px;
    padding: 20px;
    box-sizing: border-box;
}

/* 使用媒体查询实现不同屏幕尺寸下的样式调整 */
@media (max-width: 600px) {
    .flex-item {
        flex: 100%;
        min-width: 100%;
    }
}

解释说明：

1. 百分比宽度：.container 使用 width: 100%，使其宽度根据父元素的宽度自适应变化。
2. Flexbox 布局：.flex-container 使用 display: flex 和 flex-wrap: wrap 来创建一个可以自动换行的弹性盒子容器。每个 .flex-item 会根据可用空间自动调整大小，并且最小宽度为 200px。
3. 媒体查询：当屏幕宽度小于或等于 600px 时，.flex-item 的宽度变为 100%，以确保在小屏幕上每个项目占据一行。

通过这些方法，可以实现一个简单而有效的自适应布局。