diff --git a/public/cssBike/index.css b/public/cssBike/index.css index bbd0697..bef6a84 100644 --- a/public/cssBike/index.css +++ b/public/cssBike/index.css @@ -879,4 +879,271 @@ color: #70849D; margin-top: 20px; display: inline-block; +} + +/* 响应式媒体查询 */ +@media (max-width: 1199px) { + /* 首屏巨幕响应式 */ + .index-giant-cont h1 { + font-size: 3.2rem; + } + + /* 解决方案区域响应式 */ + .index-solut { + padding-top: 80px; + height: auto; + } + + .solut-detail { + height: auto; + padding: 40px 0 80px; + } + + .solut-detail ul { + top: 0; + display: block; + } + + .solut-detail ul li { + margin: 10px 20px; + } + + /* APP介绍区域响应式 */ + #picbtns { + width: 90%; + } + + #picbtns .caption { + width: 45%; + margin: 0 2.5%; + float: left; + } + + /* 收益区域响应式 */ + .index-profit ul { + width: 90%; + } + + .index-profit ul li { + margin: 20px 2%; + width: 28%; + } + + /* 应用场景响应式 */ + .use-scene ul { + width: 90%; + } + + .use-scene ul li { + width: 48%; + margin: 0 1%; + height: 420px; + } + + /* 锁页面响应式 */ + .page-conter { + width: 95%; + margin: 60px auto 100px auto; + } + + .car-lock { + width: 95%; + } + + .car-lock-left { + width: 100%; + text-align: center; + } + + .lock-descript { + width: 95%; + } + + .h-cont ul li { + width: 49%; + margin-bottom: 20px; + } + + /* 案例页面响应式 */ + .giant-cont { + width: 90%; + } + + .location { + width: 95%; + } + + .location-cont ul li { + width: 100%; + margin: 10px 0; + border: none; + border-bottom: 1px solid #E4E8EC; + } + + .location-cont ul li.li-border { + border-right: none; + border-left: none; + } +} + +@media (max-width: 768px) { + /* 首屏巨幕移动端 */ + .index-giant-cont { + margin-top: 25%; + } + + .index-giant-cont h1 { + font-size: 2.4rem; + white-space: normal; + padding: 0 16px; + } + + /* 解决方案移动端 */ + .index-solut h2 { + font-size: 2.2rem; + } + + .index-solut p { + font-size: 1rem; + margin: 12px auto 24px; + padding: 0 16px; + } + + .index-solut ul { + width: 240px; + } + + .solut-detail ul li { + width: 80px; + height: 90px; + margin: 8px 12px; + } + + /* APP介绍移动端 */ + #picbtns { + width: 100%; + } + + #picbtns .caption { + width: 90%; + margin: 0 auto 20px; + float: none; + } + + /* 收益区域移动端 */ + .index-profit { + height: auto; + padding-bottom: 40px; + } + + .index-profit ul { + width: 92%; + } + + .index-profit ul li { + width: 100%; + height: auto; + margin: 16px 0; + background-size: contain; + } + + .index-profit ul li h2 { + position: static; + margin-top: 8px; + } + + /* 应用场景移动端 */ + .use-scene { + height: auto; + padding-bottom: 40px; + } + + .use-scene ul { + width: 92%; + } + + .use-scene ul li { + width: 100%; + height: 380px; + margin-bottom: 16px; + } + + /* 侧边栏移动端隐藏 */ + .left-bar { + display: none; + } + + /* 锁页面移动端 */ + .car-lock-left h2 { + font-size: 3.5rem; + } + + .h-cont ul li { + width: 100%; + margin-bottom: 15px; + } + + /* 案例页面移动端 */ + .giant-cont h2 { + font-size: 4rem; + } + + .location-cont ul li { + height: auto; + padding: 20px 0; + } + + /* 导航栏移动端 */ + .top-nav-cent { + width: 95%; + } + + .top-nav-cent ul { + display: none; /* 可以添加移动端菜单 */ + } +} + +@media (max-width: 480px) { + /* 超小屏幕优化 */ + .index-giant-cont h1 { + font-size: 2rem; + } + + .index-solut h2 { + font-size: 1.8rem; + } + + .app-introd-top h2 { + font-size: 2.2rem; + } + + .index-profit h2 { + font-size: 2.2rem; + } + + .use-scene-tit h2 { + font-size: 2.2rem; + } + + .car-lock-left h2 { + font-size: 2.8rem; + } + + .giant-cont h2 { + font-size: 3rem; + } + + .index-giant-cont button { + width: 200px; + height: 45px; + font-size: 1.6rem; + } + + .giant-cont button { + width: 180px; + height: 35px; + font-size: 1rem; + } + + } \ No newline at end of file