問題描述

問題解答

原理就是利用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插件制作響應式導航