国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

原理就是利用css的媒體查詢(xún)（media query）來(lái)檢測(cè)屏幕寬度，根據(jù)屏幕寬度來(lái)改變導(dǎo)航的css樣式。

類(lèi)似下面這樣：

@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;}
}

=======================================補(bǔ)充線(xiàn)：我的下面這篇博文詳細(xì)闡述過(guò)，可以參考：

利用Responsive Nav.js插件制作響應(yīng)式導(dǎo)航