You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
2.3 KiB

/* 移动端适配 */
@media (max-width: 768px) {
/* 仅手机端显示 */
.only-phone {
display: block;
}
/* 仅pc显示 */
.only-pc {
display: none;
}
/* ----模块二的内容---- */
.grid-item {
width: 150px;
height: 100px;
/* 调整移动端高度 */
margin: 5px 0;
background-image: url(../images/website/m.png) !important;
background-size: 100% 100%;
background-position: center;
}
.grid-item:nth-child(2) {
background-image: url(../images/website/m.png) !important;
background-size: 100% 100%;
background-position: center;
}
/* 在移动端隐藏文字 */
.grid-item h2,
.grid-item p {
display: none;
}
/* -------------------- */
/* 背景图操作 */
#section1 {
background-image: url(../images/website/banner@2x.png);
background-size: cover;
background-position: center;
}
#section5 {
background-image: url(../images/website/m.png);
background-size: cover;
background-position: center;
}
/* -------------------- */
/* 菜单栏 */
.nav-menu {
position: fixed;
top: 60px;
left: -100%;
width: 30%;
height: calc(100vh - 60px);
background-color: #2c3e50;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 15px 0;
}
.menu-toggle {
display: block;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.section h2 {
font-size: 2rem;
}
/* -------------------- */
}
/* 暂时不考虑↓ */
@media (max-width: 480px) {
.nav-container {
height: 50px;
}
#section5 {
/* 为手机端准备的图片 */
background-image: url(../images/website/m.png);
background-size: cover;
background-position: center;
}
.section-container {
padding-top: 50px;
}
.nav-menu {
top: 50px;
height: calc(100vh - 50px);
}
.nav-logo {
font-size: 1rem;
}
.section {
padding: 15px;
}
.section h2 {
font-size: 1.8rem;
}
}