Jony/assets/css/joe.responsive.scss

/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */

/* 有侧边栏时候的样式 */
html {
    @media (max-width: 1760px) {
        #live2d-widget {
            visibility: hidden;
        }
    }
    @media (max-width: 1400px) {
        .joe_live__play-player {
            height: 520px;
        }
        .joe_detail__friends {
            grid-template-columns: repeat(3, 1fr);
        }
        .joe_video__source-list {
            grid-template-columns: repeat(7, 1fr);
        }
    }
    @media (max-width: 1200px) {
        .joe_live__list-item .thumb {
            height: 120px;
        }
        .joe_live__play-player {
            height: 450px;
        }
        .joe_detail__friends {
            grid-template-columns: repeat(2, 1fr);
        }
        .joe_video__list-item {
            grid-template-columns: repeat(4, 1fr);
        }
        .joe_video__list-item .item .thumb {
            height: 200px;
        }
        .joe_video__player-play {
            height: 450px;
        }
        .joe_video__source-list {
            grid-template-columns: repeat(6, 1fr);
        }
        .joe_wallpaper__list {
            grid-template-columns: repeat(3, 1fr);
        }
        .joe_index__hot-list .item .link .inner .image {
            height: 80px;
        }
        .joe_index__banner {
            display: block;
        }
        .joe_index__banner-recommend {
            width: 100%;
            margin-left: 0;
            padding-top: 15px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 15px;
            &.noswiper {
                padding-top: 0;
            }
        }
        .joe_index__banner-recommend .item {
            height: 135px;
            margin: 0 !important;
        }
    }
    @media (max-width: 992px) {
        .joe_aside {
            display: none;
        }
        .joe_live__play-player {
            height: 400px;
        }
        .joe_video__player-play {
            height: 400px;
        }
        .joe_video__source-list {
            grid-template-columns: repeat(5, 1fr);
        }
        .swiper-container {
            height: 300px;
        }
        .swiper-container .item {
            height: 300px;
        }
        .joe_header__below {
            display: none;
        }
        .joe_header__above-logo {
            padding: 0;
            margin: 0;
            &::after {
                display: none;
            }
        }
        .joe_header__above-nav {
            display: none;
        }
        .joe_index__hot-list .item .link .inner .image {
            height: 100px;
        }
    }
    @media (max-width: 768px) {
        #Joe {
            display: none;
        }
        .noaside::after {
            content: "移动端适配中...";
        }
    }
    @media (max-width: 576px) {
    }
}

/* 没有侧边栏时候的样式 */
html .noaside {
    .joe_live__list {
        grid-template-columns: repeat(4, 1fr);
    }
    .joe_video__list-item {
        grid-template-columns: repeat(7, 1fr);
    }
    .joe_wallpaper__list {
        grid-template-columns: repeat(5, 1fr);
    }
    @media (max-width: 1400px) {
        .joe_detail__friends {
            grid-template-columns: repeat(4, 1fr);
        }
        .joe_video__list-item {
            grid-template-columns: repeat(6, 1fr);
        }
    }
    @media (max-width: 1200px) {
        .joe_detail__friends {
            grid-template-columns: repeat(3, 1fr);
        }
        .joe_video__list-item {
            grid-template-columns: repeat(5, 1fr);
        }
        .joe_wallpaper__list {
            grid-template-columns: repeat(4, 1fr);
        }
        .joe_index__hot-list .item .link .inner .image {
            height: 100px;
        }
        .joe_index__banner-recommend .item {
            height: 150px;
        }
    }
    @media (max-width: 992px) {
        .joe_live__list {
            grid-template-columns: repeat(3, 1fr);
        }
        .joe_detail__friends {
            grid-template-columns: repeat(2, 1fr);
        }
        .joe_video__list-item {
            grid-template-columns: repeat(4, 1fr);
        }
        .joe_wallpaper__list {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 768px) {
    }
    @media (max-width: 576px) {
    }
}