摘要：一響應式布局最近在項目開發的時候，發現了自己對布局方面的一些不足之處，特別是適配不同分辨率方面，幾乎是沒有經驗的。在查閱了相關資料之后發現，響應式布局是目前解決不同分辨率顯示問題的最好解決方案。

最近在項目開發的時候，發現了自己對css布局方面的一些不足之處，特別是適配不同分辨率方面，幾乎是沒有經驗的。在查閱了相關資料之后發現，響應式布局是目前解決不同分辨率顯示問題的最好解決方案。達到一次設計，普遍使用的功能。本文主要以一個小項目為例，來說明這個概念。響應式Web設計

media查詢是響應式布局的核心所在，根據不同的條件來顯示不同的css樣式。達到不同分辨率的屏幕上顯示不同的樣式效果的目的。

@media(min-width:1200px)
{
  .container{
     width:1170px;
    }  
}

上例就是媒體查詢一個最簡單的示例。當輸出設備的寬度大于1200px的時候，容器的寬度等于1170px。想了解更多media query可以點擊這里

作為前端開發的同學們一定都上過BootStrap的官網。我們來看看官網的導航部分，當屏幕寬度不同的時候，其導航條的樣式也是不一樣的。

（1）當屏幕寬度大于768px時顯示的樣式

（2）當屏幕寬度小于768px時顯示的樣式

下面我們就來實現一下這個小功能。

  

    

      

        Bootstrap
        
          
          
          
        
      
      
    
  
  

    

      B
      
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
      
下載Bootstrap
      
當前版本： v3.3.7 | 文檔更新于：2017-05-22
    
  

html部分主要是借鑒了bootstrap原站的寫法，發現他們在寫html部分的時候，用的標簽語義化非常好也很規范，這點很值得我們學習。像頁面的頭部都是使用的是header標簽，導航部分使用nav，正文部分使用main標簽等等。這些標簽的準確使用能很好的讓我們看出頁面的一個整體脈絡。

body{
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color:#fff;
  font-size:14px;
  line-height: 1.42857143;
  color:#333;
}
div.container{
  font-weight: 500;
  color: #563d7c;
  margin:0 auto;
  overflow: hidden;
  padding:0px 15px;
  @media (min-width: 768px)
  {
    width:750px;
  }
  @media (min-width: 992px)
  {
    width:970px;
  }
  @media (min-width: 1200px)
  {
    width:1170px;
  }
  div.nav-logo{
    font-size: 18px;
    overflow: hidden;
    @media (min-width: 768px)
    {
      float: left;
    }
    a{
      display: block;
      padding: 15px;
      line-height: 20px;
      @media (min-width: 768px)
      {
        margin-left:-15px;
      }
      @media (max-width: 768px)
      {
        float: left
      }
    }
    button{
      @media (min-width: 768px)
      {
        display: none;
      }
      float:right;
      padding:9px 10px;
      margin:8px auto;
      background-color: #f9f9f9;
      border-color:#f9f9f9;
      border:1px solid transparent;
      span.icon-bar{
        width: 22px;
        height: 2px;
        display: block;
        background-color: #563d7c;
        &:nth-of-type(2n){
          margin: 4px 0px;
        }
      }
    }
  }
  nav.nav-content{
    overflow: hidden;
    @media (max-width: 768px)
    {
      clear: both;
      height: 0px;
      transition: height 200ms linear;
    }
    ul.nav-item{
      @media (min-width: 768px)
      {
        float: left;
        overflow: hidden;
      }
      li{
        @media(min-width: 768px)
        {
          padding:15px;
          line-height: 20px;
          float:left;
        }
        a{
          @media(max-width: 768px)
          {
            display: block;
            padding:10px 15px;
            line-height: 20px;
          }
        }
      }
    }
    ul.nav-item-right{
      @media(min-width: 768px)
      {
        float: right;
        margin-right: -15px;
      }
    }
  }
}
main.bs-docs-masthead{
  padding:80px 0px;
  div.container{
    color:#fff;
    span{
      margin:0 auto 30px;
    }
  }
  .lead{
    @media (min-width: 768px)
    {
      width: 80%;
    }
    @media (max-width: 768px)
    {
      font-size: 20px;
    }
    font-size: 30px;
    margin:0 auto 30px;
    .btn{
      padding: 15px 30px;
      font-size: 20px;
      width:auto;
    }
  }
}
.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 1px;
}

css的核心部分就是使用了@media query查詢，具體參加代碼。主要是幾個地方用了@media查詢來控制不同的屏幕寬度顯示不同的樣式。

當屏幕小于768px時，頁面會顯示一個buttton按鈕，當點擊button時，菜單出現，再點擊隱藏，bootstrap封裝了一個collapse類來實現這一功能。因為自己對css動畫用的不多，所以想自己寫一個類似的簡單功能，所以這里就沒有使用collapse類，而是實現了一個類似的功能。
js部分

   const navContent = document.getElementsByClassName("nav-content")[0]
   const clickBtn = document.getElementsByTagName("button")[0]
   const collapseHeight = document.getElementsByClassName("nav-item")[0]
   clickBtn.addEventListener("click",function(e){
      if(!parseInt(window.getComputedStyle(navContent,null).height)){
        navContent.style.height = "304px"
      }
      else{
        navContent.style.height = 0
      }
    })

以上代碼基本能實現一個collapse部分，但是如果僅僅這樣寫還遠遠達不到預期的效果，這里就需要加上css3動畫-transition。transition會捕獲css的變化，并且應用動畫的形式過渡變化，而不是硬生生的改變。這點是非常實用的功能。以下代碼就是讓高度在200ms，線性的改變高度。

transition: height 200ms linear;

更多關于transition的知識點擊這里

通過以上的小案例，我們可以大致了解一個響應式布局是一個什么樣的概念。在日常開發中，響應式布局是一個比較有用的布局方法，主要幾點就是媒體查詢的使用。（另外還有不設置絕對寬度，流體布局的使用等等）。以后自己在開發頁面的時候，一定要考慮好在不同分辨率輸出設備上的兼容顯示問題。這點非常重要。