响应式布局 底部客户联系代码

<div id="toolbar">
  <div class="x3"><a href="/"><span class="icon-home"></span>首页</a></div>
  <div class="x3"><a href="tel:电话号码"><span class="icon-phone"></span>电话</a></div>
  <div class="x3"><a href="sms:电话号码"><span class="icon-envelope-o"></span>短信</a></div>
  <div class="x3"><a href="#"><span class="icon-user"></span>联系</a></div>
</div>

/* 当浏览器的可视区域小于760px，显示该代码*/
@media screen and (max-width: 760px){
#toolbar {
    color: #fff;
    width: 100%;
    height: 54px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 8;
    background: #000;
    display: block;
}
#toolbar a {
    width: 100%;
    color: #fff;
    display: block;
    padding: 5px 0 0 0;
    line-height: 23px;
    font-size: 14px;
}
#toolbar a span {
    font-size: 22px;
    display: block;
}
.x3 {
    width: 25%;
    float: left;
}
}