Jony/assets/css/joe.responsive.scss

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

/* 有侧边栏时候的样式 */
html {
	@media (max-width: 1760px) {
		#live2d-widget {
			visibility: hidden;
		}
	}
	@media (max-width: 1400px) {
        .joe_detail__article-player {
            height: 450px;
        }
		.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_detail__article-player {
            height: 400px;
        }
		.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_detail__article-player {
            height: 360px;
        }
		.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) {
	}
}