찾다

 >  Q&A  >  본문

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

1.png

高洛峰高洛峰2954일 전940

모든 응답(1)나는 대답할 것이다

  • 三叔

    三叔2016-10-24 17:04:14

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


    회신하다
    0
  • 취소회신하다