/* 1. 基础重置：统一不同设备的默认样式 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* 确保边框和内边距不影响元素总尺寸 */
}

/* 2. 全局样式：使用相对单位 */
div {
    border: 1px solid blue;
}

/* 3. 主内容区：自适应高度和宽度 */
.one {
    width: 100%; /* 宽度随屏幕变化 */
    min-height: 100vh; /* 高度至少占满屏幕 */
    padding-bottom: 56px; /* 预留底部导航栏高度（固定值，导航栏高度不变） */
}

/* 4. 底部导航栏：固定定位+自适应宽度 */
.two {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px; /* 固定高度，在任何设备上保持一致 */
    width: 100%; /* 宽度随屏幕变化 */
    display: flex;
    background-color: white;
    border-top: 1px solid #eee;
}

/* 5. 导航项：平均分配宽度+响应式布局 */
.three {
    flex: 1; /* 平均分配父容器宽度（关键：在任何屏幕宽度下都自动平分） */
    display: flex;
    flex-direction: column; /* 图标在上，文字在下 */
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 4px 0; /* 上下内边距，控制整体在容器内的居中 */
    transition: background-color 0.2s;
}

/* 6. 图标：自适应尺寸（关键：在不同屏幕下保持比例） */
.three img {
    width: 6vw;       /* 基于屏幕宽度的百分比 */
    max-width: 24px;  /* 但最大不超过 24px */
    height: auto; /* 保持宽高比，避免变形 */
    margin-bottom: 2px; /* 图标与文字的间距 */
    object-fit: contain; /* 确保图标完整显示 */
}

/* 7. 文字：响应式字体大小 */
.three span {
    font-size: clamp(10px, 3vw, 12px); /* 动态字体：最小10px，最大12px，随屏幕宽度变化 */
    line-height: 1;
}

/* 8. 点击反馈 */
.three:active {
    background-color: #f5f5f5;
}

/* 9. 媒体查询：针对大屏幕的特殊优化（可选） */
@media (min-width: 768px) {
    /* 当屏幕宽度 ≥ 768px 时（电脑端），微调样式 */
    .two {
        max-width: 768px; /* 限制电脑端导航栏最大宽度，避免太宽导致图标分散 */
        left: 50%; /* 居中显示 */
        transform: translateX(-50%); /* 配合left:50%实现水平居中 */
        border-radius: 12px 12px 0 0; /* 电脑端加圆角，更美观 */
    }
}