章节3.响应式网页布局

# 1.响应式网页布局是什么

响应式网页布局，顾名思义，就是响应式，即根据屏幕大小自动调整布局。而我们使用的屏幕包括：大屏显示器、电脑显示器、平板电脑、手机等。允许同一网站内容在各种屏幕尺寸和设备上自动调整以适应最佳显示效果。这种技术的核心思想是根据用户的设备和屏幕尺寸的变化来动态地优化网页的布局和样式，从而提供一个一致且舒适的用户体验。

# 2.响应式网页布局的实现方法

响应式网页布局的实现方法有很多，常用的有：

使用媒体查询

使用CSS3的flexbox弹性盒布局

使用CSS3的grid布局

百分比布局

vw 响应式布局

rem 响应式布局

更多了解...

上述方式中，以媒体查询、flex弹性盒布局两种方式用的较多，关于flex布局在我们第一学期已经学习过了，因此我们这里用媒体查询来讲解一下响应式网页布局。

# 3.简单的响应式页面案例

以媒体查询为例，来实现一个简单的响应式页面布局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单的响应式页面案例</title>
        <style>
* {
  box-sizing: border-box;
  text-decoration: none;
}
 
body {
  font-family: Arial;
  margin: 0px;
  background: #f1f1f1;
}

.container{
    width: 1200px;
    margin: 0px auto;
}
 
/* 头部标题 */
.container .header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.container .header h1 {
  font-size: 40px;
  color: #111111;
}
 
/* 导航条 */
.container .topnav {
  overflow: hidden;
  background-color: #137D6F;
}
 
/* 导航条链接 */
.container .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.container .topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.container .leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.container .rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.container .fakeimg {
    background-color: #137D6F;
}
.container .fakeimg img{
  width: auto;
  height: 200px;
  margin: 0px auto;
  display: block;
}
 
/* 文章卡片效果 */
.container .card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.container .row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.container .footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* 响应式布局 - 屏幕尺寸小于 1200px 时，改变居中总宽度 */
@media screen and (max-width: 1200px) {
    .container{
        width: 100%;
        margin: 0px;
    }
    .container .row,.container .topnav{
        padding: 0px 16px;
    }
}
 
/* 响应式布局 - 屏幕尺寸小于 992px 时 */
@media screen and (max-width: 992px) {
    .container .leftcolumn, .container .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
/* 响应式布局 -屏幕尺寸小于 510px 时 */
@media screen and (max-width: 510px) {
    .container .topnav {
      display: none;
    }

    .container .fakeimg img{
    width: 100%;
    height: auto;
    max-height: 200px;
  } 
}
</style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>睿晨编程</h1>
                <p>从零开始学习网站开发、小程序开发、app开发</p>
            </div>

            <div class="topnav">
                <a href="#">首页</a>
                <a href="#">课程视频</a>
                <a href="#">学习文档</a>
                <a href="#" style="float:right">答疑专区</a>
            </div>

            <div class="row">
                <div class="leftcolumn">
                    <div class="card">
                        <h2>【第一学期】html+css通用企业网页</h2>
                        <h5>
                            <a href="#">【课程概述】</a>
                            <a href="#">【完整课程学习】</a>
                            <a href="#">【课程免费试看（1-13课）】</a>
                        </h5>
                        <div class="fakeimg" style="height:200px;">
                            <img
                                src="https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/lesson01.jpg"
                                alt="课程预览图">
                        </div>
                        <p>零基础学员入门课程</p>
                        <p>本期课程专为零基础的学员定制录制的，纯html+css做企业网站的网页，主讲html和css的相关基础知识，flex布局相关知识，封装css基础样式库，引入字体图标及网页开发基础布局思维，完成企业网站网页的开发过程。</p>
                    </div>
                    <div class="card">
                        <h2>【第一学期】html+css通用企业网页</h2>
                        <h5>
                            <a href="#">【课程概述】</a>
                            <a href="#">【完整课程学习】</a>
                            <a href="#">【课程免费试看（1-13课）】</a>
                        </h5>
                        <div class="fakeimg" style="height:200px;">
                            <img
                                src="https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/lesson01.jpg"
                                alt="课程预览图">
                        </div>
                        <p>零基础学员入门课程</p>
                        <p>本期课程专为零基础的学员定制录制的，纯html+css做企业网站的网页，主讲html和css的相关基础知识，flex布局相关知识，封装css基础样式库，引入字体图标及网页开发基础布局思维，完成企业网站网页的开发过程。</p>
                    </div>
                </div>
                <div class="rightcolumn">
                    <div class="card">
                        <h2>关于睿晨编程</h2>
                        <div style="height:100px;">
                            睿晨编程，带您从零开始做网站、系统、小程序、APP，注重最新的技术，创最实用的教程，为热爱编程的零基础学员服务！
                        </div>
                        <p>带您从零开始做网站、系统、小程序、APP</p>
                    </div>
                    <div class="card">
                        <h3>上线课程</h3>
                        <div><p>【第一学期】html+css通用企业网页</p></div>
                        <div><p>【第二学期第一季】</p></div>
                        <div><p>【第二学期第二季】</p></div>
                        <div><p>【第二学期第三季】</p></div>
                    </div>
                    <div class="card">
                        <h3>剪辑中的课程</h3>
                        <div><p>【第三学期第一季】</p></div>
                        <div><p>【第三学期第一季】</p></div>
                    </div>
                </div>
            </div>

            <div class="footer">
                <h2>睿晨编程版权所有</h2>
            </div>
        </div>
    </body>
</html>

# 4.Bootstrap框架

我们在响应式网页布局的实现方法：使用媒体查询提到过，在实际开发时，@media 媒体查询 会结合删格系统(bootstrap)一起来使用，实现真正意义上的响应式开发。
那么这里提到 删格系统，那么就必须提到响应式布局中非常重要的一个框架：Bootstrap。

# ① Bootstrap介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是一个CSS/HTML框架，它包含了一个响应式的、移动设备优先的框架。

# ② Bootstrap框架已发布的版本

目前已发布了：

Bootstrap3

Bootstrap4

Bootstrap5

# ③ Bootstrap框架中的网格系统

推荐使用Bootstrap3、Bootstrap4，最新版使用的是最新的css属性，在某些浏览器存在兼容性。
以Bootstrap4 网格系统为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 网格示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <h1>手机、平板、桌面、大桌面显示器、超大桌面显示器排版效果</h1>
        <p>
            超小设备 <576px ---> .col- <br/>
            平板 ≥576px ---> .col-sm-  <br/>
            桌面显示器 ≥768px ---> .col-md-  <br/>
            大桌面显示器 ≥992px ---> col-lg-  <br/>
            超大桌面显示器 ≥1200px ---> .col-xl-  <br/>
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
                手机不存在左右，默认每个div都占12份，
                平板左边3份，桌面显示器左边占6份，大桌面显示器左边占4份，超大桌面显示器左边占2份
            </div>
            <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
                平板右边9份，桌面显示器右边占6份，大桌面显示器右边占8份，超大桌面显示器右边占10份
            </div>
          </div>
        </div>
      </div>
</body>
</html>

Bootstrap框架重点理解一下网格系统，其它的直接看文档就可以了使用，不需要记忆。网格系统是Bootstrap框架的核心，网格系统可以实现响应式布局。

# ④ Bootstrap框架几点重要说明

Bootstrap框架的所有样式，大家可以类比我们第一学期自己封装的css样式库，类样式名称不需要记忆，用的时候直接看文档即可；

Bootstrap框架在前些年刚出来的时候非常火，但是由于现在移动端的普及以及移动端业务的普及，客户更多的是需要开发移动端的网站网页、小程序、APP等功能，很显然，响应式网页布局只能解决网站网页的问题，不能够解决小程序、app的问题，因此，现在很多公司都开始使用移动端的框架，比如：uni-app、vant、vant-ui、vant-weapp、vant-h5等等，这个我们后面会讲到，所以Bootstrap框架大家作为一个技能了解一下即可；

也并不是说Bootstrap框架就完全没有用了，比如：如果用户只希望它的网站、网站后台可以在手机上进行操作（不涉及小程序、app），那么Bootstrap框架还是非常适合使用的；

# ⑤ Bootstrap框架的项目应用

利用Bootstrap框架开发的网站有很多，这个给大家提供一个网站，下载里面的代码，然后自己进行修改，这样就可以快速搭建一个响应式网站了。

Bootstrap框架响应式网站：https://www.bootstrapmb.com/

# 5.响应式后台管理系统（egg.js + Bootstrap）

我们在前面几节课带领大家学习了什么是响应式布局，响应式布局的常见方法，并重点学习了媒体查询在响应式布局中的使用（大家也跟着编写了一个小案例），然后我们学习了bootstrap框架，学习了bootstrap框架的核心内容网格系统，网格系统是响应式布局的核心知识点。最后给大家推荐了响应式布局的学习网站和模版框架。大家可以去这个网站下载学习响应式网站的案例，然后自己进行修改，这样就可以快速搭建一个响应式的网站了。

接下来，我们将结合上一章节，章节2：egg.js基础，和本章节响应式布局，来完成一下我们企业网站开发中，当用户提交了留言之后，你作为网站的管理者，应该怎么样在网站上面查看用户的留言。

# 1.响应式网页布局是什么

# 2.响应式网页布局的实现方法

# 3.简单的响应式页面案例

# 4.Bootstrap框架

# ① Bootstrap介绍

# ② Bootstrap框架已发布的版本

# ③ Bootstrap框架中的网格系统

# ④ Bootstrap框架几点重要说明

# ⑤ Bootstrap框架的项目应用

# 5.响应式后台管理系统（egg.js + Bootstrap）

# ① 轻量级Bootstrap管理系统模板后台UI框架 - Ventura

# ② 具体操作查看 响应式后台管理系统（egg.js + Bootstrap）

# 【第二学期第3季课程】其它章节

# 其它学期课程

# ② 具体操作查看响应式后台管理系统（egg.js + Bootstrap）