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

问题描述

问题解答

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