/* 基础样式重置 */
* {
*     margin: 0;
*         padding: 0;
*             box-sizing: border-box;
*             }
*
*/* 顶部导航栏容器 */
.header {
    width: 100%;
    padding: 15px 20px; /* 上下内边距固定，左右内边距适配 */
    background-color: #f8f9fa; /* 可根据需求修改背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选：添加阴影增强层次感 */
}

/* 图片容器 - 用于居中对齐 */
.title-container {
    max-width: 1200px; /* 最大宽度限制，防止在超大屏幕上过大 */
    margin: 0 auto; /* 水平居中 */
    text-align: center; /* 图片水平居中 */
}

/* 自适应图片样式 */
.site-title {
    max-width: 100%; /* 确保图片不超过容器宽度 */
    height: auto; /* 保持图片原始比例 */
    display: inline-block; /* 消除图片底部间隙 */
    /* 可选：添加最大高度限制 */
    /* max-height: 100px; */
}

/* 平板设备适配 */
@media (max-width: 768px) {
    .header {
        padding: 10px 15px;
    }
}

/* 手机设备适配 */
@media (max-width: 480px) {
    .header {
        padding: 8px 10px;
    }
    .site-title {
        /* 手机设备下的特殊样式 */
        max-height: 80px; /* 例如限制最大高度 */
    }
}