/* 公共样式 */ body { margin: 0; padding: 0; } .home { width: 100%; height: 100%; min-height: 100vh; font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif; background: url("../images/bg.jpg"); background-repeat: no-repeat; background-size: cover; } .home-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .home-content--bg { width: 100%; height: 64.8vh; margin-top: 1.5rem; background: url("../images/home-bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } .home-content--box { width: 100%; } .home-content--tip { display: flex; padding-left: 3rem; margin-top: 2.625rem; } .home-content--tip__item { padding-right: 1rem; font-size: 2.5rem; font-weight: 400; color: #333333; } .home-content--line { padding-left: 3rem; margin-top: 2.5rem; } .home-content--line__block { width: 8rem; height: .4rem; background: #1A6CE6; } .home-content--bg__mobile{ display: none; } /* 适配1360*768的电脑屏幕: */ /* 适配1366*768的电脑屏幕: */ /* 适配1440*900的电脑屏幕: */ /* 适配1400*1050的电脑屏幕: */ @media screen and (min-width: 1360px) and (max-width: 1440px){ /* 样式 */ /* CSS 样式 */ .home-content--bg { /* height: 22rem!important; */ margin-top: 0; } .home-content--tip{ margin-top: 2.2rem; } .home-content--line{ margin-top: 1.6rem; } } /* 适配1024*768的电脑屏幕 */ @media only screen and (max-width: 1024px) and (max-height: 768px) { /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ .home-content--bg { height: 22rem!important; margin-top: 0; } .home-content--tip__item { font-size: 1.5rem!important; } .home-content--line { margin-top: 1rem!important; } .home-content--tip{ margin-top: 1rem; } } /* 当屏幕宽度小于等于 768px 时,应用以下样式 */ @media screen and (max-width: 768px) { /* 移动端样式 */ .home-content--bg { padding: 3rem 0; } .home-content--tip__item { padding-right: 1rem; font-size: 1.2rem; font-weight: 400; color: #333333; } .home-content{ padding-bottom: 6rem; } #footer{ margin-top: 1rem; } .home-content--bg{ display: none; } .home-content--bg__mobile{ display: block; width: 100%; } .home-content--bg__mobile img{ width: 100%; height: auto; } }