三叔2016-10-24 17:04:14
原理就是利用css的媒体查询(media query)来检测屏幕宽度,根据屏幕宽度来改变导航的css样式。
类似下面这样:
@media screen and (min-width: 40em) { .nav-collapse ul li { width: 18%; } } .navbox { background: #1e9f3d; height: 40px;} .search { margin-top: 50px;} .servicePhone{ margin-top: 60px; height: 60px; line-height: 60px;} .phoneIcon { width: 10%; float: left; height: 30px; line-height: 30px; text-align: center;} .phoneNumber { width: 80%; float: left; margin-left: 10%; margin-top: -10%; line-height: 30px;} @media screen and (max-width:768px) and (min-width:640px){ .search{ float: right;} .servicePhone {float: left;} .logo{ float: left; width: 220px;} .contactInfo h6 {line-height: 20px;} .contactTit h5 { line-height: 50px;} } @media screen and (max-width: 640px){ .servicePhone { display: none;} .search { display: none;} .fixed-bottom {display: block;} .contactInfo h6 {line-height: 20px;} .contactTit h5 { line-height: 50px;} .footerBtm { margin-bottom: 100px;} }
=======================================补充线:我的下面这篇博文详细阐述过,可以参考:
利用Responsive Nav.js插件制作响应式导航