Jony/assets/css/joe.responsive.scss
2021-02-07 14:11:50 +08:00

171 lines
4.3 KiB
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) {
}
}