Homepage-imsyy/css/mobile.css

254 lines
3.6 KiB
CSS
Raw Normal View History

2021-09-25 14:57:18 +00:00
@charset"utf-8";
/*小于1400px时*/
2021-10-03 09:03:31 +00:00
@media (max-width: 1400px) {}
2021-09-25 14:57:18 +00:00
/*小于1200px时*/
@media (max-width: 1200px) {
/*总布局*/
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 1100px !important;
}
.weekday {
display: none;
}
}
/*小于992px时*/
@media (max-width: 992px) {
2021-10-03 09:03:31 +00:00
/*简介不可点击
2021-09-26 13:30:38 +00:00
.message {
pointer-events: none;
}
2021-10-03 09:03:31 +00:00
*/
2021-09-26 13:30:38 +00:00
2021-09-25 14:57:18 +00:00
/*一言*/
.col.hitokotos {
display: none;
}
/*日期显示*/
.weekday {
display: inline;
}
/*标题文字*/
.main-img img {
width: 110px;
}
span.img-title {
font-size: 4.75rem;
}
span.img-text {
font-size: 1.75rem;
}
}
2021-10-03 09:03:31 +00:00
/*小于840px时*/
@media (max-width: 840px) {
/*社交链接*/
.social {
max-width: 100%;
justify-content: center;
}
#link-text {
display: none !important;
}
.link i {
margin: 0px 20px;
}
}
2021-09-25 14:57:18 +00:00
/*小于789px时*/
@media (max-width: 789px) {
/*标题文字*/
span.img-text {
display: none;
}
}
/*小于768px时*/
@media (max-width: 768px) {
/*标题文字*/
.main-img img {
width: 100px;
}
span.img-title {
font-size: 4.5rem;
}
}
/*小于660px时*/
@media (max-width: 660px) {
/*左侧栏高度*/
.main-left {
transform: translateY(20px);
}
/*右侧栏隐藏*/
.col.right {
display: none;
}
/*标题文字*/
span.img-text {
display: inline;
}
/*简介*/
.message {
max-width: 100%;
pointer-events: none;
}
/*
.des {
justify-content: space-between;
}
*/
2021-09-26 13:30:38 +00:00
2021-09-25 14:57:18 +00:00
/*菜单栏按钮*/
.menu {
display: flex;
justify-content: center;
position: fixed;
top: 84%;
}
.munu-button {
padding: 5px 20px;
background: rgb(0 0 0 / 20%);
backdrop-filter: blur(10px);
border-radius: 6px;
font-size: 1.25rem;
transition: 0.5s;
2021-10-03 09:03:31 +00:00
width: 60px;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
2021-09-25 14:57:18 +00:00
}
/*页脚文字*/
footer {
font-size: 0.85rem;
}
}
@media (min-width: 660px) {
.menu {
display: none !important;
}
2021-10-03 09:03:31 +00:00
/*时钟显示*/
span#win_text,
span#win_speed {
display: none;
}
2021-09-25 14:57:18 +00:00
}
/*小于390px时*/
@media (max-width: 390px) {
.main-img img {
display: none;
}
}
/*
菜单按钮
*/
.menus .col.left {
display: none;
}
.menus .col.right {
display: block !important;
transition: 0.5s;
padding: 0rem 0.75rem;
}
/*功能区调整*/
.menus .col.hitokotos {
display: block;
}
.menus .col.times {
display: none;
}
/*边界布局*/
.menus .row {
--bs-gutter-x: 0rem;
}
.menus .col.\32 {
margin: 0 0.75rem;
}
.menus .logo {
display: inline !important;
2021-10-03 09:03:31 +00:00
text-align: center;
2021-09-25 14:57:18 +00:00
position: fixed;
top: 8%;
font-family: 'Pacifico-Regular';
font-size: 1.75rem;
}
/*切换动画*/
2021-10-01 13:42:30 +00:00
/*
2021-09-25 14:57:18 +00:00
.hitokoto,
.time,
.link-card,
.message {
2021-09-26 12:21:22 +00:00
animation: fade-in;
2021-09-25 14:57:18 +00:00
-webkit-animation: fade-in 0.5s;
-moz-animation: fade-in 0.5s;
-o-animation: fade-in 0.5s;
-ms-animation: fade-in 0.5s;
}
2021-10-01 13:42:30 +00:00
*/
2021-09-25 14:57:18 +00:00
.logo,
.line,
.main-img,
2021-09-26 13:30:38 +00:00
.social,
2021-09-27 13:07:24 +00:00
.close,
2021-10-01 13:42:30 +00:00
.hitokoto,
.time,
.link-card,
.message,
2021-09-27 13:07:24 +00:00
#link-text {
2021-09-25 14:57:18 +00:00
animation: fade 0.5;
-webkit-animation: fade 0.5s;
-moz-animation: fade 0.5s;
-o-animation: fade 0.5s;
-ms-animation: fade 0.5s;
2021-09-28 12:56:14 +00:00
}
/*
移动端功能区切换
*/
.mobile .col.hitokotos {
display: none;
}
.mobile .col.times {
display: block;
2021-09-25 14:57:18 +00:00
}