css 自适应

/* 使用百分比宽度和弹性布局实现自适应布局 */

/* 1. 使用百分比宽度 */
.container {
    width: 100%; /* 容器宽度为父元素的100% */
}

.box {
    width: 50%; /* 子元素宽度为父元素的50% */
    float: left; /* 左浮动使元素并排显示 */
}

/* 2. 使用弹性布局 (Flexbox) */
.flex-container {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
}

.flex-item {
    flex: 1; /* 子元素自动分配剩余空间 */
    min-width: 200px; /* 设置最小宽度 */
}

/* 3. 使用媒体查询实现响应式设计 */
@media (max-width: 600px) {
    .box {
        width: 100%; /* 当屏幕宽度小于600px时，盒子宽度为100% */
        float: none; /* 取消浮动 */
    }
}

解释说明：

1. 百分比宽度：通过设置元素的宽度为百分比，可以使元素根据父容器的宽度进行调整。例如，.box 的宽度为父容器的 50%，当父容器宽度变化时，.box 的宽度也会相应变化。

2. 弹性布局 (Flexbox)：使用 display: flex 可以创建一个灵活的容器，子元素可以根据容器的大小自动调整。flex-wrap: wrap 允许子元素在容器宽度不足时换行排列。flex: 1 让子元素平均分配剩余的空间。

3. 媒体查询：通过 @media 规则可以根据不同的屏幕尺寸应用不同的样式。例如，当屏幕宽度小于 600px 时，.box 的宽度会变为 100%，并且取消浮动，确保在小屏幕上内容不会溢出或错位。

这种组合方式可以实现较为复杂的自适应布局，适用于不同设备和屏幕尺寸。