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

1.png

高洛峰
高洛峰

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

répondre à tous(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插件制作响应式导航


Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!