响应式布局实战学习

模仿阿里百秀首页的响应式布局实战

任务一览：
先将PC端页面搭建完成之后在进行一下移动端页面的适配任务
1、处于超小屏幕下，logo里面的图片进行隐藏，方法为在该盒子中设置 hidden-xs 类

2、平时隐藏，在超小屏幕下显示，在对应盒子中设置 visible-xs 类

3、进入小屏幕和超小屏幕之后，nav 里的 li 浮动起来，宽度设置为20%，实现一行显示，此时利用媒体查询

4、进入超小屏幕时，nav 里的 li 的文字大小缩小

5、进入超小屏幕下，news 里的第一个 li 宽度100%，剩下的各50%

6、进入超小屏幕下，publish 下图片以及一些文字的隐藏

效果可参考网页：https://www.alibaixiu.cn/
使用谷歌浏览器，进行浏览器拉拽查看自适应效果，并且利用谷歌浏览器的移动端模拟器进行移动端效果查看

首先，在实战项目过程中，主要用到 BootStrap 的 container 类作为自适应外框（会自动根据屏幕大小而改变自身大小的外框），在 BootStrap 中是这样定义的：


.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

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

/* 总共分为四个档位，分别是超小屏幕，小屏幕，中等屏幕，大屏幕（xs, sm, md, lg），
    container盒子宽度分别对应以上媒体查询内设置的像素大小 */

另外，实战项目中还使用了一些工具类，比如字体颜色的 text-muted，超小屏幕下隐藏模块的类 hidden-xs，超小屏幕下显示的类 visible-xs

最后是一个大坑，在我们使用媒体查询的时候：

/* 设计稿是1280px的，所以要更改一下大屏幕下的宽度 */
@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

请一定注意 and 后面一定要加上空格，这个错误编译器是不会报错的，但是会导致媒体查询失效！

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/3.7.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2">
                <div class="logo">
                    <a href="">
                        <img src="./upload/logo.png" alt="" class="hidden-xs">
                        <span class="visible-xs">阿里百秀</span>
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                        <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
                        <li><a href="#" class="glyphicon glyphicon-camera">奇趣事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-camera">美食节</a></li>
                    </ul>
                </div>
            </header>

            <article class="col-md-7">
                <!-- 新闻 -->
                <div class="news clearfix">
                    <!-- clearfix是bootsstrap提供的清除浮动的类 -->
                    <ul>
                        <li>
                            <a href="">
                                <img src="./upload/thumbnail.png" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./upload/mayun.jpg" alt="">
                                <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./upload/mountain.jpg" alt="">
                                <p>世界真美 令人惊叹 卫星拍地球风景地貌</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./upload/snake.jpg" alt="">
                                <p>震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./upload/finger.jpg" alt="">
                                <p>关于指甲的十个健康知识 你知道几个</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 发表 -->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2019-11-26</p>
                            <p class="hidden-xs">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</p>
                            <p class="text-muted">阅读(2417) 评论(2) 赞(18) <span class="hidden-xs">标签：风景 / 地理 / 趣味生活</span></p>
                        </div>
                        <div class="col-sm-3 pic">
                            <img src="./upload/mountain.jpg" alt="" class="hidden-xs">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2019-11-26</p>
                            <p class="hidden-xs">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</p>
                            <p class="text-muted">阅读(2417) 评论(2) 赞(18) <span class="hidden-xs">标签：风景 / 地理 / 趣味生活</span></p>
                        </div>
                        <div class="col-sm-3 pic">
                            <img src="./upload/mountain.jpg" alt="" class="hidden-xs">
                        </div>
                    </div><div class="row">
                        <div class="col-sm-9">
                            <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2019-11-26</p>
                            <p class="hidden-xs">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</p>
                            <p class="text-muted">阅读(2417) 评论(2) 赞(18) <span class="hidden-xs">标签：风景 / 地理 / 趣味生活</span></p>
                        </div>
                        <div class="col-sm-3 pic">
                            <img src="./upload/mountain.jpg" alt="" class="hidden-xs">
                        </div>
                    </div><div class="row">
                        <div class="col-sm-9">
                            <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2019-11-26</p>
                            <p class="hidden-xs">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</p>
                            <p class="text-muted">阅读(2417) 评论(2) 赞(18) <span class="hidden-xs">标签：风景 / 地理 / 趣味生活</span></p>
                        </div>
                        <div class="col-sm-3 pic">
                            <img src="./upload/mountain.jpg" alt="" class="hidden-xs">
                        </div>
                    </div><div class="row">
                        <div class="col-sm-9">
                            <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2019-11-26</p>
                            <p class="hidden-xs">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</p>
                            <p class="text-muted">阅读(2417) 评论(2) 赞(18) <span class="hidden-xs">标签：风景 / 地理 / 趣味生活</span></p>
                        </div>
                        <div class="col-sm-3 pic">
                            <img src="./upload/mountain.jpg" alt="" class="hidden-xs">
                        </div>
                    </div>
                </div>
            </article>

            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="./upload/zgboke.jpg" alt="">
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">热搜</span>
                    <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                    <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
                </a>
            </aside>
        </div>
    </div>
</body>

</html>

CSS代码

/* 注意：使用媒体查询@media的时候注意and后要有空格，
此错误不会报错但是会导致媒体查询无法生效 */
body{
    background-color: #f5f5f5;
}
.container{
    background-color: #fff;
}

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

@media screen and (max-width: 767px){
    .nav li a{
        font-size: 14px;
        padding: 3px;
    }
    .news li:nth-child(1){
        width: 100%!important;
    }
    .news li{
        width: 50%!important;
    }
    .publish h3{
        font-size: 14px;
    }
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* header */
header {
    padding-left: 0 !important;
}

.logo {
    text-align: center;
    background-color: #429ad9;
}

.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.logo img {
    display: block;
    margin: 0 auto;
    /* width: 100%; */
    /* logo图片不要缩放 */
    max-width: 100%;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}

.nav a:hover {
    background-color: #fff;
    color: #333;
}

.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}

/* article */
.news li {
    width: 25%;
    float: left;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.news li:nth-child(1) {
    width: 50%;
    height: 266px;
}

.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
    padding: 0 10px;
}

.news li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.news li a img {
    width: 100%;
    height: 100%;
}

.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
    margin-bottom: 0;
}

/* publish */
.publish {
    border-top: 1px solid #ccc;
}

.pic {
    margin-top: 10px;
}

.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
}

.pic img {
    width: 100%;
}

/* banner */
.banner img {
    width: 100%;
}

.hot {
    display: block;
    margin-top: 20px;
    padding: 0 20px 20px;
    border: 1px solid #ccc;
}

.hot a:nth-child(1) img {
    width: 360px;
}

.hot span {
    margin-bottom: 20px;
    border-radius: 0;
}

.hot p {
    font-size: 12px;
}

此项目源代码以及图片等资源：
链接：https://pan.baidu.com/s/1rTbnt5o8KV4--3q-BKH91w
提取码：fhif

以上就是本次项目实战的学习总结