初探响应式布局 - 以小项目为例

一 响应式布局

最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。响应式Web设计

二 media查询

media查询是响应式布局的核心所在，根据不同的条件来显示不同的css样式。达到不同分辨率的屏幕上显示不同的样式效果的目的。

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

上例就是媒体查询一个最简单的示例。当输出设备的宽度大于1200px的时候，容器的宽度等于1170px。想了解更多media query可以点击这里

三 响应式项目

作为前端开发的同学们一定都上过BootStrap的官网。我们来看看官网的导航部分，当屏幕宽度不同的时候，其导航条的样式也是不一样的。

（1）当屏幕宽度大于768px时显示的样式

（2）当屏幕宽度小于768px时显示的样式

下面我们就来实现一下这个小功能。

3.1 html核心代码

  <header>
    <div class="container">
      <div class="nav-logo">
        <a href="">Bootstrap</a>
        <button type="button" class="navbar-toggle">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav class="nav-content">
        <ul class="nav-item">
          <li><a href="#">起步</a></li>
          <li><a href="#">全局CSS样式</a></li>
          <li><a href="#">组件</a></li>
          <li><a href="#">javaScript插件</a></li>
          <li><a href="#">定制</a></li>
          <li><a href="#">网站实例</a></li>
        </ul>
        <ul class="nav-item nav-item-right">
          <li><a href="#">BootStrap中文网</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="bs-docs-masthead">
    <div class="container">
      <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
      <p class="lead">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
      <p class="lead"><a href="#" class="btn btn-outline-inverse btn-lg">下载Bootstrap</a></p>
      <p class="version">当前版本： v3.3.7 | 文档更新于：2017-05-22</p>
    </div>
  </main>

html部分主要是借鉴了bootstrap原站的写法，发现他们在写html部分的时候，用的标签语义化非常好也很规范，这点很值得我们学习。像页面的头部都是使用的是header标签，导航部分使用nav，正文部分使用main标签等等。这些标签的准确使用能很好的让我们看出页面的一个整体脉络。

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 一些简单交互的实现

当屏幕小于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的知识点击这里

四 总结

通过以上的小案例，我们可以大致了解一个响应式布局是一个什么样的概念。在日常开发中，响应式布局是一个比较有用的布局方法，主要几点就是媒体查询的使用。（另外还有不设置绝对宽度，流体布局的使用等等）。以后自己在开发页面的时候，一定要考虑好在不同分辨率输出设备上的兼容显示问题。这点非常重要。