CSS响应式导航原理,下图那个具体怎么做出来的?
高洛峰
高洛峰 2016-10-24 17:03:29
0
1
927

1.png

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(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插件制作响应式导航


熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!