美文网首页
响应式布局实战学习

响应式布局实战学习

作者: 零基础的前端菜鸡 | 来源:发表于2019-11-27 11:00 被阅读0次

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

任务一览：
先将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

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

相关文章

  • 响应式布局实战学习

    模仿阿里百秀首页的响应式布局实战 任务一览：先将PC端页面搭建完成之后在进行一下移动端页面的适配任务1、处于超小屏...

  • 响应式布局目录

    └─Web响应式布局├─1 响应式布局介绍├─2 响应式布局实例(Media Queries模块) 上├─3 响应...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计（布局） 响应式网页设计...

  • Bootstrap实战 - 响应式布局

    一、介绍 响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览...

  • 响应式布局学习

    一、响应式网页 一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等 响应式网页的三个特征 1...

  • 《响应式Web设计：HTML5和CSS3实战(第2版)》03章

    响应式Web设计:HTML5和CSS3实战(第2版) 第三章 弹性布局与响应式图片 3.1 将固定像素转换为弹性比...

  • 3 响应式布局实例(Media Queries模块)下

    3 响应式布局实例(Media Queries模块)下 在学习Media Queries模块前， 先通过一个响应式...

  • 响应式网页开发

    响应式布局 什么是响应式布局？可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局？给用户更好的视觉使用...

  • 响应式开发

    响应式布局 什么是响应式布局？可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局？给用户更好的视觉使用...

  • js基础（6）

    27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发？把我们开发完成的产品，能够让其适配不同的设备...

网友评论

      本文标题：响应式布局实战学习

      本文链接：https://www.haomeiwen.com/subject/plnuwctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|响应式布局实战学习|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！