/* 移动端适配 */ @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; } }