#subtitleWrapper {
    max-width: 45%;
    min-width: 700px;
}

/* 当屏幕宽度小于等于某一阈值时，提高最大宽度 */
@media screen and (max-width: 800px) {
    #subtitleWrapper {
        max-width: 90%;
        min-width: 0;
    }
    /* 对#text的修改不会生效 */
    #text {
        max-width: 90%;
        min-width: 20px;
    }
}

/* #text会覆盖前面@media的修改 */
#text {
        max-width: 45%;
        min-width: 720px;
        display: flex;
        flex-direction: column;
        align-items: center;
        backdrop-filter: blur(15px);
        background-color: rgba(255, 255, 255, 0.19);
        border-radius: 14px;
        padding: 20px;
    }

正常生效

#subtitleWrapper {
    max-width: 45%;
    min-width: 700px;
}

#text {
    max-width: 45%;
    min-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.19);
    border-radius: 14px;
    padding: 20px;
}

/* 当屏幕宽度小于等于某一阈值时，提高最大宽度 */
@media screen and (max-width: 800px) {
    #subtitleWrapper {
        max-width: 90%;
        min-width: 0;
    }
    #text {
        max-width: 90%;
        min-width: 20px;
    }
}