@media screen and (max-width: 768px) {
    html {
        overflow-x: hidden;
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        height: 100vh;
        position: relative;
    }
    
    body {
        transform-origin: top left;
        transform: scale(0.4);
        width: 250%;
        height: auto; /* 改为auto，让内容自然撑开 */
        overflow-x: hidden;
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        position: relative;
        min-height: 428vh; /* 设置最小高度 */
        /* 确保内容不会被截断 */
        padding-bottom: 50vh; /* 减少底部padding */
    }
    
    main {
        height: auto;
        min-height: calc(250vh - 400px); /* 减少footer的预留空间 */
    }
    
    footer {
        position: relative;
        width: 100%;
        transform-origin: top left; /* 与body保持一致的缩放原点 */
        height: auto;
        bottom: 0;
        margin-top: 8vh; /* 减少与main的间距 */
        margin-bottom:60vh;
    }
    
    /* 确保.w容器在footer中正确显示 */
    footer .w {
        width: 1150px;
        margin: 0 auto;
        transform-origin: top left;
    }
}

@media screen and (max-width: 480px) {
    html {
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        overflow-x:hidden;
    }
    
    body {
        transform: scale(0.35);
        width: 285.71%;
        height: auto;
        min-height: 285.71vh;
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        padding-bottom: 60vh; /* 减少底部padding */
    }
    
    main {
        min-height: calc(285.71vh - 500px); /* 减少footer的预留空间 */
    }
    
    footer {
        margin-top: 60px; /* 减少与main的间距 */
        margin-bottom:40vh
    }
}

@media screen and (max-width: 375px) {
    html {
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
    }
    
    body {
        transform: scale(0.3);
        width: 333.33%;
        height: auto;
        min-height: 333.33vh;
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        padding-bottom: 150vh; /* 增加底部padding */
    }
    
    main {
        min-height: calc(333.33vh - 800px); /* 增加footer的预留空间 */
    }
    
    footer {
        margin-top: 300px; /* 增加与main的间距 */
    }
}

@media screen and (max-width: 320px) {
    html {
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
    }
    
    body {
        transform: scale(0.25);
        width: 400%;
        height: auto;
        min-height: 400vh;
        overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
        padding-bottom: 200vh; /* 增加底部padding */
    }
    
    main {
        min-height: calc(400vh - 900px); /* 增加footer的预留空间 */
    }
    
    footer {
        margin-top: 350px; /* 增加与main的间距 */
    }
}