.home--nav { width: 100%; padding: 1em 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; /* position: fixed; left: 0; top: 0; */ } .home--nav__logo { width: 11.125rem; height: 3.5625rem; } .home--nav__tab { display: flex; } .home--nav__tab--item { margin: 0 1rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; } a { text-decoration: none; font-size: 1.125rem; font-weight: 400; color: #333333; } a:active, a:hover { color: #1A6CE6; } a:visited { text-decoration: underline; } .home--nav__phone { display: flex; align-items: right; } .home--nav__phone--icon { width: 1.625rem; height: 1.625rem; } .home--nav__phone--text { font-size: 1.0rem; font-weight: 400; color: #666; padding-left: .8rem; } .active { border-bottom: 3px solid #1A6CE6; padding-bottom: .5rem; } /* 适配1024*768的电脑屏幕 */ @media only screen and (max-width: 1024px) and (max-height: 768px) { /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ .home--nav__phone--text { font-size: 1rem; padding-left: 0.5rem; } .home--nav__phone--icon { width: 1.25rem; height: 1.25rem; } a { font-size: 1rem; } } /* 当屏幕宽度小于等于 768px 时,应用以下样式 */ @media screen and (max-width: 768px) { /* 移动端样式 */ .home--nav__tab--item { margin: 0 .5rem; } /* .home--nav__tab{ display: none; } */ /* .home--nav__phone--text{ display: none; } */ .home--nav__logo { width: 8rem; height: auto; } .home--nav__tab { padding: .5rem 0; } a { text-decoration: none; font-size: 0.875rem; font-weight: 400; color: #333333; display: inline-block; width: 2.8125rem; text-align: center; } .home--local__text { padding: 0 !important; text-align: center; } .home--nav__phone--text { font-size: 1rem; padding-left: 0.5rem; } .home--nav__phone--icon { width: 1.25rem; height: 1.25rem; } }