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

---

CSS MediaQuery + js

---

可以看看bootstrap

---

基本原理就是：利用css的媒体查询来检测屏幕宽度，当屏幕达到一定宽度时会发生相对应的变化。
可以把它想象成：hover，：hover是当鼠标经过时会发生对应的变化，而媒体查询当屏幕宽度的变化到一定程度时才发生对应的变化。
详细的原理和理解方法慕课网有对应课程

---

响应式是通过media媒体查询@media screen and (max-width:) and (min-width:){将需要隐藏或者变化的元素样式写在这里}，这样就能在不同分辨率下改变布局和样式了

---

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