移动端布局之响应式布局-阿里百秀

布局分析

 
 

1. 技术选型：响应式布局，采用bootstrap框架，采用1280px设计稿

/* 修改container最大宽度为1280根据设计稿来走的 */
@media screen and (min-width:1280px) {
    .container{
        width: 1280px;
    }
}

 
 
2. 页面布局分析：

 
 

 
 

划分成三列

 
 

一些注意点

 
 
（1）在bootstrap里清除浮动
 
 

.publish {
    /* 直接给边框，边框跑到浏览器最上面，因为上面的盒子没有给高度，浮动，文字在正确的位置是因为文字环绕图片的效果 */
    /* 因此要给父元素清除浮动样式，bootstrap有设置好的清除浮动样式，在html父元素加类名clearfix */
  border-top: 1pxb solid #ccc;
}

 
 

（2）在bootstrap里标题字段的使用和文字颜色的修改

<!-- h4是bootstrap设置好的字号为24px的标题 -->
              <h4>关于指甲的10个健康知识，你知道几个？</h4>
              <!-- p标签里面文字设置成灰色，bootstrap里已经给你设置好了，直接调用灰色文字的类名 -->
              <p class="text-secondary">alibaixiu 发布于2015-12-23</p>

 
 
(3)响应式布局：在小屏幕以及小屏幕以上屏幕下，图片显示，超小屏幕下图片隐藏并且显示一行文字，文字用盒子装起来，在超小屏幕下显示
css

.logo img{
    display: block;
    /* 图片不想要缩放效果，不然在小屏幕下图片里的字变得超级大 */
    max-width: 100%;
    margin: 0 auto;
}
/* 1.我们如果进入了超小屏幕下，logo里面的图片就隐藏起来，利用响应式工具里的隐藏 */

/* 2.我们事先准备好一个盒子在logo里，它平时是隐藏起来的，只有在超小屏幕下显示 */
.logo span{
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

html

 <!--  1.我们如果进入了超小屏幕下，logo里面的图片就隐藏起来，利用响应式工具里的隐藏 -->
        <div class="logo" >
          <a href="">
            <img src="images/logo.png" alt="" class="hidden-xs">
            <!--  2.我们事先准备好一个盒子在logo里，它平时是隐藏起来的，只有在超小屏幕下显示 -->
            <span class="visible-xs"></span>
          </a>
        </div>

 
 
（4）

/* 当我们进入小屏幕和超小屏幕，我们nav里面的li浮动起来，并且宽度是20% */
@media screen and (max-width:991px) {
    .nav li{
        float: left;
        width: 20%;
    }
}
/* 当我们进入超小屏幕时，nav里面的文字会变成14px */
@media screen and (max-width:991px){
    .nav li a {
        font-size: 14px;
    }
}

 
 
（5）

/* 当我们进入超小屏幕时，nav里面的文字会变成14px */
/* 当我们处于超小屏幕，第一个li宽度为100%,剩下的宽度各站50%,分为两行 */
@media screen and (max-width:767px){
    .nav li a {
        font-size: 14px;
        /* 去掉内边距，不然文字显示不全 */
        padding-left: 0;
    }
    .news li:nth-child(1){
        width: 100%!important;
    }
    .news li{
        width: 50%!important;
    }
    .publish h3{
        font-size: 14px;
    }
}