响应式布局---5. 案例：阿里百秀(中屏幕以下)

alibailiu图片logo修改

1. 小屏幕下

• 修改前

.logo img {
    /* 保证图片等比例缩放 */
     100%;
}

出现的问题：在中屏及以上都是正常显示的，但是到小屏幕的时候开始单独占据整行，这样高度也会同比例缩放，导致整个图巨大无比。我们希望的效果是：在小屏幕的时候宽度可以独占整行，但是高度不要等比例缩放。

• 修改后

.logo img {
    /* 保证图片等比例缩放 */
    /*  100%; */
    /* logo图片不需要缩放 */
    max- 100%;
}

大屏：

小屏：

再让图片居中显示（转换成块级元素才可以用margin：0 auto;）

.logo img {
    /* 保证图片等比例缩放 */
    /*  100%; */
    display: block;
    /* logo图片不需要缩放 */
    max- 100%;
    margin: 0 auto;
}

2. 超小屏幕下

2.1 到超小屏幕下，该图片隐藏起来

• 修改前

<div class="logo">
    <a href="#">
        <img src="images/logo.png" alt="">
    </a>
</div>

• 修改后

<div class="logo">
    <a href="#">
        <img src="images/logo.png" alt="" class="hidden-xs">
    </a>
</div>

问题：到超小屏幕下，logo里面的图片就隐藏起来了。由于图片隐藏了，就彻底消失了。

解决办法：事先在logo里面准备好一个盒子，它平时是隐藏起来的，只有在超小屏幕下才显示。

<div class="logo">
    <a href="#">
        <img src="images/logo.png" alt="" class="hidden-xs">
        <!-- 事先在logo里面准备好一个盒子span，它平时是隐藏起来的，只有在超小屏幕下才显示。 -->
        <span class="visible-xs">阿里百秀</span>
    </a>
</div>

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

导航栏修改

当进入小屏幕和超小屏幕的时候 我们nav里面的li浮动起来 并且宽度为20%，这样可以实现宽度一行内显示。

/* 当进入小屏幕和超小屏幕的时候 我们nav里面的li浮动起来 并且宽度为20%，这样可以实现宽度一行内显示。 */
@media screen and (max- 991px) {
    .nav li {
        float: left;
         20%;
    }
}

@media screen and (max- 767px) {
    .nav li a {
    /* 当进入超小屏幕的时候 我们nav里面的文字会变成14px */
    font-size: 14px;
}

在超小屏幕小a中的字显示不全,是由于a的左侧内边距导致的 所以在超小屏幕小要消除内边距

@media screen and (max- 767px) {
    .nav li a {
    /* 当进入超小屏幕的时候 我们nav里面的文字会变成14px */
    font-size: 14px;
    /* 在超小屏幕小a中的字显示不全,是由于a的左侧内边距导致的 所以在超小屏幕小要消除内边距 */
    padding-left: 0;
}

article修改

@media screen and (max- 991px) {
    .nav li {
        float: left;
         20%;
    }
    article {
        margin-top: 10px;
    }
}

news修改

当处于超小屏幕下 第一个li宽度为100% 剩下的小li各占50%

• 修改前
  

• 修改后

@media screen and (max- 767px) {
    .nav li a {
        /* 当进入超小屏幕的时候 我们nav里面的文字会变成14px */
        font-size: 14px;
        /* 在超小屏幕小a中的字显示不全,是由于a的左侧内边距导致的 所以在超小屏幕小要消除内边距 */
        padding-left: 0;
    }
    /* 当处于超小屏幕下 news的第一个li宽度为100% 剩下的小li各占50% */
    .news li:nth-child(1) {
         100%!important;
    }
    .news li {
         50%!important;
    }
}

超小屏幕针对手机端，修改后的排版在手机端更好看。

publish修改

问题：该模块右边的配套在超小屏幕下显得巨大无比，我们要求在超小屏幕下将该图片隐藏起来。
同时有一些内容需要省略
缩小标题的字号

• 修改前

<!-- 发表 -->
<div class="publish">
    <!-- 该模块小屏幕以上结构都不变 -->
    <div class="row">
        <div class="col-sm-9">
            <!-- 24px的标题 -->
            <h3>生活馆 关于指甲的10个健康知识 你知道几个</h3>
            <!-- 将p的类容变成灰色 class="text-muted"-->
            <p class="text-muted">alibaixiu 发布于 2015-11-23</p>
            <p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) 标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
        </div>
        <!-- 该模块右边的配套在超小屏幕下显得巨大无比，我们要求在超小屏幕下将该图片隐藏起来。 -->
        <div class="col-sm-3 pic">
            <img src="upload/3.jpg" alt="">
        </div>
    </div>
</div>

• 修改后

<!-- 发表 -->
<div class="publish">
    <!-- 该模块小屏幕以上结构都不变 -->
    <div class="row">
        <div class="col-sm-9">
            <!-- 24px的标题 -->
            <h3>生活馆 关于指甲的10个健康知识 你知道几个</h3>
            <!-- 将p的类容变成灰色 class="text-muted"-->
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
        </div>
        <!-- 该模块右边的配套在超小屏幕下显得巨大无比，我们要求在超小屏幕下将该图片隐藏起来。 -->
        <div class="col-sm-3 pic hidden-xs">
            <img src="upload/3.jpg" alt="">
        </div>
    </div>
</div>

@media screen and (max- 767px) {
    .nav li a {
        /* 当进入超小屏幕的时候 我们nav里面的文字会变成14px */
        font-size: 14px;
        /* 在超小屏幕小a中的字显示不全,是由于a的左侧内边距导致的 所以在超小屏幕小要消除内边距 */
        padding-left: 0;
    }
    /* 当处于超小屏幕下 news的第一个li宽度为100% 剩下的小li各占50% */
    .news li:nth-child(1) {
         100%!important;
    }
    .news li {
         50%!important;
    }
    /* 当处于超小屏幕时publish里的标题字号改小一点 */
    .publish h3 {
        font-size: 14px;
    }
}