CSS响应式导航原理，下图那个具体怎么做出来的？

Question

Answer 1

原理就是利用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插件制作响应式导航