初探響應(yīng)式布局 - 以小項(xiàng)目為例

caspar 發(fā)布于2019-08-29 12:43 / 2417人閱讀

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

一響應(yīng)式布局

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

二 media查詢

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

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

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

三響應(yīng)式項(xiàng)目

作為前端開發(fā)的同學(xué)們一定都上過BootStrap的官網(wǎng)。我們來看看官網(wǎng)的導(dǎo)航部分，當(dāng)屏幕寬度不同的時候，其導(dǎo)航條的樣式也是不一樣的。

（1）當(dāng)屏幕寬度大于768px時顯示的樣式

（2）當(dāng)屏幕寬度小于768px時顯示的樣式

下面我們就來實(shí)現(xiàn)一下這個小功能。

3.1 html核心代碼

  
    
      
        Bootstrap
        
      
      
        
          起步
          全局CSS樣式
          組件
          javaScript插件
          定制
          網(wǎng)站實(shí)例
        
        
          BootStrap中文網(wǎng)
        
      
    
  
  
    
      B
      Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項(xiàng)目。
      下載Bootstrap
      當(dāng)前版本： v3.3.7 | 文檔更新于：2017-05-22

html部分主要是借鑒了bootstrap原站的寫法，發(fā)現(xiàn)他們在寫html部分的時候，用的標(biāo)簽語義化非常好也很規(guī)范，這點(diǎn)很值得我們學(xué)習(xí)。像頁面的頭部都是使用的是header標(biāo)簽，導(dǎo)航部分使用nav，正文部分使用main標(biāo)簽等等。這些標(biāo)簽的準(zhǔn)確使用能很好的讓我們看出頁面的一個整體脈絡(luò)。

3.2 css部分核心代碼

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查詢來控制不同的屏幕寬度顯示不同的樣式。

3.3 一些簡單交互的實(shí)現(xiàn)

當(dāng)屏幕小于768px時，頁面會顯示一個buttton按鈕，當(dāng)點(diǎn)擊button時，菜單出現(xiàn)，再點(diǎn)擊隱藏，bootstrap封裝了一個collapse類來實(shí)現(xiàn)這一功能。因?yàn)樽约簩ss動畫用的不多，所以想自己寫一個類似的簡單功能，所以這里就沒有使用collapse類，而是實(shí)現(xiàn)了一個類似的功能。
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
      }
    })

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

transition: height 200ms linear;

更多關(guān)于transition的知識點(diǎn)擊這里

四總結(jié)

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