[CSS3]响应式布局

已于 2025-05-30 13:51:18 修改
阅读量858 收藏 23
点赞数 11
分类专栏： H5C3 文章标签： 前端 css css3 html
于 2025-05-30 13:50:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN20221005/article/details/148336888
版权

导读

响应式就是一套代码, 兼容大中小不同的屏幕, 即网页内容不变, 网页布局随屏幕切换而改变

媒体查询

响应式布局的核心技术是媒体查询

  1. 媒体查询可以检测屏幕尺寸, 设置差异化的css

开发中的常用写法

  1. 使用范围属性, 划定屏幕范围
  • max-width 最大宽度
  • min-width 最小宽度
  1. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
        
    </style>
</head>
<body>
    
</body>
</html>

书写顺序: 所有的css属性都有层迭性, 所以使用媒体查询时也要注意书写顺序

  1. 如果使用min-width属性, 媒体查询要从小往大写
  2. 如果使用max-width属性, 媒体查询要从大往小写

  1. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            视口宽度 >= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
         */

         /* css属性都有层叠性 */
         /* 不按顺序写,屏幕大于1200px时,蓝色不会生效, 被绿色层叠  */
         /* @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        } */
        
        @media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }
        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

    </style>
</head>
<body>
    
</body>
</html>

媒体查询的完整写法 (工作中常用的还是简写)

  1. 关键词的可选值
  • and (多个条件要同时满足)
  • only (多个条件至少满足一个)
  • not (条件不满足)
  1. 媒体类型的可选值
  • 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

  1. 媒体特性的可选值
  • 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

外链式css引入: 满足条件时样式表才会生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body>
    
</body>
</html>

小屏隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

        .left {
            width: 300px;
            min-height: 500px;
            background-color: pink;
        }

        .main {
            flex: 1;
            min-height: 500px;
            background-color: skyblue;
        }

        /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }
    </style>
</head>
<body>
    /* 两列布局: 左侧固定宽度, 右侧宽度自适应 */
    <div class="box">
        <div class="left">left</div>
        <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div>
    </div>
</body>
</html>
  1. 大屏布局效果

  1. 中屏的布局效果

  1. 小屏的布局效果

BootStrap

了解BootStrap

知道UI框架的作用

  1. UI框架概念: 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap
  2. 作用: 基于框架开发，效率高，稳定性高

使用BootStrap框架快速开发响应式网页

  1. Bootstrap 是由 Twitter 公司开发维护的前端UI 框架，它提供了大量编写好的CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

体验一下: 引入框架, 通过类名, 就可以快速实现响应式布局, 非常方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验BootStrap</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
    </div>
</body>
</html>
  1. 大屏效果:

  1. 中屏效果

  1. 小屏效果

  1. 超小屏效果

使用步骤

下载: 首页 → BootStrap3中文文档→下载BootStrap

  1. 中文官网: http://www.bootcss.com/
  2. 开发版本和源码版本

使用

  1. 引入BootStrap提供的CSS代码

  1. 调用类:使用Bootstrap提供的样式
  • container: 响应式布局版心类
  1. 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap使用方法</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">1</div>
</body>
</html>

  • 盒子添加container这个类名后, 就有了版心的效果, 并且使用媒体查询进行了屏幕适配

栅格系统

栅格系统是BootStrap框架的核心

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份, 把所有的视口分为4类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!--
         需求: 
            大屏: 一行排列4个内容  (12 / 4 = 3)
            中屏:一行排列2个内容   (12 / 2 = 6)
    -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
    
</body>
</html>

栅格系统常用类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
   
    <!-- 版心样式 -->
    <!-- 盒子居中, 自带左右各15px的padding -->
    <div class="container">1</div>

    <!-- 不需要版心内边距的时候用 -->
    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- 通栏样式-->
    <!-- 宽度100%: 自带左右各15px的padding -->
    <div class="container-fluid">3</div>
</body>
</html>
  1. .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
  2. .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
  3. 分别使用.row类名和.col类名定义栅格布局的行和列。
  • .container类自带间距15px;
  • .row类自带间距-15px

全局样式

掌握BootStrap手册用法使用全局CSS样式美化标签

  1. 手册: BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
  2. 网站首页 →Bootstrap3中文文档 →全局css样式 →按分类导航查找目标类

表格样式

  1. 在官网中查看表格的全局样式

  1. 在代码中使用这些样式, 查看效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-表格</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    
</body>
</html>

  • 没有书写任何样式代码,只是为元素添加了样式类名, 就完成了样式的修改

按钮样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-按钮</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-lg">成功</button>

    <button class="btn btn-warning btn-xs">警告</button>
</body>
</html>

组件

使用BootStrap组件快速布局网页

  1. 组件: BootStrap提供的常见功能，包含了HTML结构和CSS样式

  1. 使用方法
  • 引入BootStrap样式
  • 复制结构，修改内容
  1. 示例代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  /* 路径导航组件  */
  <ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">用户中心</a></li>
    <li><a href="#">用户</a></li>
    <li class="active">数据</li>
  </ol>
</body>

</html>

插件

使用BootStrap插件实现常见的交互效果

  1. BootStrap提供的常见效果,包含了HTML结构，CSS样式与JavaScript

  1. 插件的使用步骤
  • 引入BootStrap样式
  • 引入js文件: jQueryjs + BootStrap.minjs

  1. 复制HTML结构,并适当调整结构或内容

示例代码

下拉菜单效果

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插件</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown trigger
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul>
  </div>

  <script src="./js/jquery.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

轮播图效果

复制技巧: 如果代码多, 拖拽复制就不方便, 左键点击开始位置, 按住shift再右键点击结束位置, 快速选择

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插件</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="./js/jquery.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

字体图标

使用Glyphicons字体图标实现网页中的图标效果

  1. Glyphicons字体图标的使用步骤
  • HTML页面引入BootStrap样式文件
  • 空标签调用对应类名
    • glyphicon
    • 图标类
  1. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-user"></i>
</body>
</html>

腾讯全端

项目准备

新建index.html文件和index.less文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
  1. bootstrap.min.css中已经集成了清除浏览器默认的代码

banner

使用轮播组件, 并设置banner图的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- banner -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <!-- banner -->


    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
// banner
.carousel {
    // 如果视口<768, 图250 max-width
    // 如果视口<992, 图400 max-width
    // 如果视口>992, 图500 min-width

    img {
        height: 100% !important;
    }

    @media (max-width: 992px) {
        .item {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .item {
            height: 250px;
        }
    }

    @media (min-width: 992px) {
        .item {
            height: 500px;
        }
    }
}

头部组件

使用导航条组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">首页</a></li>
              <li><a href="#">博客</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Tweb Conf</a></li>
              <li><a href="#">SuperStar</a></li>
              <li><a href="#">Web前端</a></li>
              <li><a href="#">关于</a></li>

            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <!-- 头部 -->

    <!-- banner -->
    ... ...
    <!-- banner -->


    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
// 头部
.navbar-default {
    background-color: transparent;
    border: 0;
}

定制导航

bootStrap默认的导航条组件, 是屏幕小于768时才折叠为图标, 项目需求是小于992时就堆叠排列

  1. 点击定制, 里面有非常多的配置项

  1. 如果知道位置, 可以从左侧的导航中索引, 如果不清楚, 直接全局搜索

  1. 找到需要修改的配置项之后, 修改为自己需要的值

  1. 下载定制好的bootstarp, 然后在项目中使用

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  /* 标准版 */
  <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
  /* 定制版 */
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  
  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>
  1. 查看效果: 中屏的时候就可以堆叠排列了

开源项目

了解排版标签

  1. bootstrap为常见的标签都优化了默认样式, 同时提供了很多的类名, 可以方便的修改标签样式
  2. 如果需要查阅和使用, 找到全局样式, 点击排版区域进行查看

使用bootstrap栅格系统布局时, 栅格盒子只做布局, 内容的排版或者盒子的间距全部交给子级盒子

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 开源项目 -->
  <div class="project">
    <div class="container">
       /* 栅格盒子只做布局, 其他的属性, 都要加给a标签 */
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
    </div>
  </div>
  <!-- 开源项目 -->


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>
// 开源项目
.project {
    .container {
        div {
            background-color: pink;
          
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}
  1. 这样布局的原因就是, 栅格系统把网页等分为12份, 已经占满了页面
  2. 如果再额外给栅格布局的盒子添加外边距, 会让布局容器超过100%, 导致换行排列

  1. 所以最佳实践, 栅格盒子只做布局 ,不设置任何属性, 这也符合单一职责的软件开发思想
  2. 如果想让盒子之间有距离,可以控制子集盒子的边距

完成开源项目区域

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
  ... ...
  <!-- 头部 -->

  <!-- banner -->
  ......
  <!-- banner -->

  <!-- 开源项目 -->
  <div class="project">
    <h3 class="h2">OpenSource/开源项目</h3>
    <p>种类众多的开源项目，让你爱不释手</p>

    <div class="container">
      <!-- .row -->
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
    </div>
  </div>
  <!-- 开源项目 -->


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>
// 开源项目
.project {
    padding-top: 30px;
    text-align: center;

    .container {
        div {
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}

扩展内容

在全局样式中, 还有辅助类和响应式工具这两个内容我们没接触, 现在了解一下

辅助类, 帮助我们快速完成一些效果

  1. 快速浮动和清除浮动可能会用到, 需要的时候, 查阅一下, 添加类名就行

响应式工具: 不同视口宽度控制元素显示隐藏

  1. 通过类名, 就能控制元素在不同适口的显示和隐藏
  2. 之前案例自己用媒体查询控制也行, 用这个类名方便一点

CSS实现前端响应式布局
m0_54829066的博客
09-06 1687
总之，CSS 实现前端响应式布局是一项非常重要的技术，它可以提高网页的可访问性、可用性和用户体验。通过掌握 CSS 的基础知识、媒体查询、响应式图像和媒体、响应式导航菜单、响应式网格系统等技术，可以实现高效、灵活和自适应的响应式布局。同时，需要注意响应式布局的测试与调试、性能优化和未来发展趋势，不断提高响应式布局的设计和开发水平。是媒体特性的值，如具体的像素值、百分比等。响应式布局的挑战与解决方案。响应式布局的定义与重要性。响应式设计的进一步发展。响应式布局的设计原则。响应式布局的性能优化。
css怎么做响应式布局,用CSS实现响应式布局
weixin_34226447的博客
08-03 4908
响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一： 直接在CSS文件中使用@media 类型 and (条件1) and (条件二){css样式}@media screen and (max-width:980px ) {body{background-color: red;}}第二...
CSS3响应式布局（媒体查询@media）
橘猫吃不胖的博客
11-28 2695
CSS3响应式布局（媒体查询@media） 1 响应式布局 2 媒体查询 2.1 媒体类型 2.2 逻辑运算符 2.3 媒体特性 3 案例：根据页面宽度改变背景色
CSS3 响应式布局实例
歪脖先生的博客
02-25 4025
布局实例掌握了响应式设计的核心技术之后，你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂，但事实上，它比你想象的要简单。下面通过构建一个响应式的页面基本布局，让你快速了解如何使用响应式设计技术来构建响应式网站。首先，创建HTML结构和页面布局。最常见基本布局将页面划分为 4 个部分，分别是头部、主内容区、侧边栏和页脚，而主内容区和侧边栏一般都会包含在一个容器中。如：&lt...
CSS3响应式布局中常见的问题及解决方案
aronSandy的博客
04-18 852
同时，随着前端技术的不断发展，未来还将有更多的技术和工具来帮助我们实现更加高效、灵活的响应式布局。此外，随着前端框架和组件库的不断发展，如React、Vue、Angular等，它们也为我们提供了丰富的响应式组件和工具，使得我们可以更加高效地构建响应式应用。同时，随着前端技术的不断发展，我们也将迎来更多的机遇和挑战。同时，我们也需要保持对新技术和新方法的关注，以便在响应式设计的道路上不断前行，为用户提供更加出色的体验。因此，应简化导航菜单的结构和层级，减少表单的输入框和按钮数量，以提高用户的操作便利性。
CSS3响应式布局中，如何适配不同屏幕和设备？
derickForster的博客
04-18 1145
然而，随着技术的不断发展和设备的不断更新换代，我们也需要不断学习和探索新的技术和方法，以适应不断变化的市场需求。在完成响应式布局的设计和实现后，我们需要对不同设备和屏幕尺寸进行充分的测试和调试，以确保页面能够正确地显示和交互。它通过使用媒体查询（Media Queries）和流式布局（Fluid Layouts）等技术，根据设备的屏幕尺寸、分辨率和方向等特性，自动调整页面布局、字体大小、图片尺寸等元素，以确保页面在不同设备上都能够良好地显示和交互。来自：www.yangzhie288.com。
CSS3响应式布局总结
图解AI
07-21 5883
一 摘要今天给大家总结一下CSS的响应式布局,首先我们还是先弄清楚,几种布局的概念.1.静态布局(static layout)特点:固定死的宽高,典型的应用静态网站 2.自适应特点:1)为不同屏幕定制不同的布局 2)在每个布局中页面元素不随着窗口的大小而改变3.流式布局特点:1)只有一套布局 2)页面元素随着窗口的大小而改变4.响应式布局特点:1.为不同屏幕定义
css实现响应式布局
CYL_2021的博客
04-17 8532
一.什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容;自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏
CSS3学习笔记---响应式布局初略_css3响应式设备宽度
2401_84434331的博客
06-16 1085
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。Media Queries可以使用关键词”and”将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。
CSS响应式布局
热爱WebGIS的博客
10-21 1131
vw ，就是相对于视口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为相对于视口的高度。查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片、字体大小等等。响应式布局：是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕，简单来说就是屏幕。flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。
CSS3响应式布局
03-08
CSS3响应式布局通过媒体查询（Media Queries）、流式布局（Fluid Grids）、弹性盒模型（Flexbox）以及百分比单位等特性，实现了网页在不同设备上的自适应显示。 1. 媒体查询（Media Queries）：CSS3引入的媒体查询...
html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip_html5响应式布局怎么写
01-14
CSS3是实现响应式布局的关键，其中媒体查询（Media Queries）功能尤其重要。媒体查询允许开发者根据设备的特定特性，如视口宽度、设备像素比等，定义不同的样式规则。例如，你可以使用以下代码定义在小屏幕设备和大...
css3响应式布局悬停图标动画特效
11-24
"css3响应式布局悬停图标动画特效"是这个主题的核心，它结合了CSS3的新特性，使网页元素在鼠标悬停时能够呈现出引人入胜的动画效果，同时保持对不同设备屏幕尺寸的良好适应性。 首先，响应式布局是现代网站设计的...
_以HTML 5 CSS3 jQuery为基础的响应式布局网页设计探讨.pdf
09-15
HTML5、CSS3 和 jQuery 基于响应式布局网页设计探讨 本文通过分析响应式布局网页的设计要求，结合 HTML5、CSS3 和 jQuery 技术的应用特点，对响应式布局网页中的文字设计、图片设计和媒体查询设计的要点进行了研究...
css3响应式布局课件
01-03
CSS3响应式布局是一种网页设计方法，它允许网站在不同的屏幕尺寸和分辨率下提供最优的浏览体验，无需为每种设备创建特定版本。这种布局方式与移动优先的设计理念紧密相连，随着移动互联网的快速发展而变得尤为重要。...
国芯思辰| 国产四通道24位生理电采集模拟前端AFE全面替换ADS1294R，心电贴性能再飞跃
最新发布
weixin_38427020的博客
05-29 519
国芯思辰，国产芯片替代
vue组件和插件的区别
u014642921的博客
05-28 394
只要有install方法并且接受Vue构造函数作为参数，就能够被Vue.use使用。可以是第三方库，也可以是自己编写的组件。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 432
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
优雅草最新实战项目技术Discuz X3.5电子签约插件开发项目实施方案优雅草·卓伊凡
一颗优雅草科技-央千澈的CSDN博客~只想无穷无尽的学习~作息早8-晚8
05-27 1346
优雅草科技将为DiscuzX3.5系统开发电子签约插件，预算9,300元，工期35天。项目采用PHP7.4+e签宝SDK技术栈，实现合同发起、签署、模板管理等功能。包含UI设计、前端开发（响应式页面）、后端插件开发及文档培训。技术方案重点包括：集成e签宝API，新建签约记录数据表，开发后台管理界面，并确保与Discuz原生系统无缝集成。项目采用模块化开发，优先保障核心签约流程，提供3个月维护期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值