04-前端技术_响应式布局

其他 2021-03-26 16:22:39 阅读次数: 0

目录

一，介绍和版心

1，介绍：

2，档位划分:

3，版心：

二，例子

三，Bootstrap体验

1，介绍

2，使用

3，布局容器

4，预置类名

扫描二维码关注公众号，回复： 12919040 查看本文章

4.1 排版

4.2 按钮

4.3 辅助类样式

4.4 字体图标

4.5 举例：

四，Bootstrap栅格系统

1，介绍

2，基本使用

3，特点：

4，列嵌套

5，列偏移

6，响应式工具

一，介绍和版心

1，介绍：

响应式布局通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕 

响应式布局涉及到知识点： 

屏幕宽度变化: 媒体查询 

布局知识: 传统布局方案（百分比、浮动、清除浮动、定位） 

2，档位划分:

媒体查询：档位划分；市场上默认的划分；三个节点、四个档位 

  • w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围） 
  • 768<= w <992 小屏设备（sm）（平板） 
  • 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器） 
  • 1200<=w 大宽屏设备（lg）（大桌面显示器）

语法：把市场上所有屏幕包括在内；

/* 1. 超小屏幕下 xs 小于 768 */ 
@media screen and (min-width: 0px) { }

/* 2. 小屏幕下 sm 大于等于768 */ 
@media screen and (min-width: 768px) { }

/* 3. 中等屏幕下 md 大于等于 992px */ 
@media screen and (min-width: 992px) { }

/* 4. 大屏幕下 lg 大于等于1200 */ 
@media screen and (min-width: 1200px) { }

3，版心：

不同的档位下，版心不同； 

档位设置：版心；

所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需 求；

语法：

/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */ 
@media screen and (max-width: 767px) { 
    .container { 
        width: 100%; 
    } 
}

/* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */ 
@media screen and (min-width: 768px) { 
    .container { 
        width: 750px; 
    } 
}

/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px*/
@media screen and (min-width: 992px) { 
    .container { 
        width: 970px; 
    } 
}

/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */ 
@media screen and (min-width: 1200px) { 
    .container { 
        width: 1170px; 
    } 
}

 注意：

  • 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px； 
  • 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px； 原因：两边留空白，用户体验好。 
  • 以上市场默认划分，可根据自己需求添加档位；

二，例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 媒体查询 适配手机 平板 PC */
        /* xs 手机*/
        @media screen and (min-width:0) {
            .container {
                width: 100%;
            }
        }

        /* sm 平板*/
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }

        /* 小PC md 平板*/
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }

            .container div {
                float: left;
            }

            .container .left {
                width: 40%;
            }

            .container .mid {
                width: 40%;
            }

            .container .right {
                width: 20%;
            }
        }

        /* 大PC lg 电脑端*/
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }

            .container div {
                float: left;
            }

            .container .left {
                width: 20%;
            }

            .container .mid {
                width: 60%;
            }

            .container .right {
                width: 20%;
            }
        }

        .container {
            height: 2000px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .container .left {
            background: #ccc;
            height: 200px;
        }

        .container .mid {
            background: #222;
            height: 800px;
        }

        .container .right {
            background: pink;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">1</div>
        <div class="mid">2</div>
        <div class="right">3</div>
    </div>
</body>

</html>

三，Bootstrap体验

BootStrap框架 可非常快地搭建出响应式页面；

全局 CSS 样式

1，介绍

BootStrap 出自 Twitter（推特），是目前最受欢迎的前端响应式框架。 

网址：

  • 中文网：http://www.bootcss.com/ 

版本：

  • 2.x.x：停止维护，代码不够简洁，功能不够完善。 
  • 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、 移动设备优先的WEB 项目。 
  • 4.x.x：最新版，目前还不是很流行

2，使用

1）进入官网https://www.bootcss.com/

2）点击中文文档

3）点击下载Bootstrap

4）下载安装方法

方法一：

方法二：

方法三：

5）下载完成，放在对应的目录下

6）使用

<!DOCTYPE html> 
<html lang="zh-CN"> 
    <head> 
        <meta charset="utf-8"> 
        <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 --> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

        <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <title>BootStrap Template</title> 

        <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css--> 
        <link href="css/bootstrap.min.css" rel="stylesheet"> 

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
        <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--> 
        <!--解决ie9以下浏览器对 css3 Media Query 的不识别 --> 
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 

        <!-- 条件注释:解决小于IE9的版本一些问题 --> 
        <!--[if lt IE 9]> 
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
        <![endif]--> 
    </head> 
    <body> 
        <h1>你好，世界！</h1> 
    </body> 
</html>

条件注释：满足条件，下面代码链接就会发出请求；

3，布局容器

版心设置：BootStrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用 处的类。 

.container：设置不同档位下的版心的宽度； 

  • 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100% 
  • 小屏（sm : small） ：平板； 768px<=w ；版心宽度定为 750px 
  • 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px 
  • 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px 

.container-fluid：百分百宽度； 

特点：

  • 所有元素为CSS3盒子模型； 
  • 布局盒子有左右15px padding值；

4，预置类名

4.1 排版

<h1>h1. Bootstrap heading</h1> 
<h2>h2. Bootstrap heading</h2> 
<h3>h3. Bootstrap heading</h3> 
<h4>h4. Bootstrap heading</h4> 
<h5>h5. Bootstrap heading</h5> 
<h6>h6. Bootstrap heading</h6> 

<p>...</p>

4.2 按钮

<a class="btn btn-default" href="#" role="button">Link</a> 
<button class="btn btn-default" type="submit">Button</button> 
<input class="btn btn-default" type="button" value="Input"> 
<input class="btn btn-default" type="submit" value="Submit">

4.3 辅助类样式

<!-- 上下文颜色 --> 
<p class="text-muted">...</p> 

<!-- 下拉三角 --> 
<span class="caret"></span>

4.4 字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

4.5 举例：

可以参考全局 CSS 样式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap Template</title>

  <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
  <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  <!-- 条件注释:解决小于IE9的版本一些问题 -->
  <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>

  <p>我是小白龙</p>
  <!-- 按钮 -->
  <a class="btn btn-default" href="#" role="button">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">
  <input class="btn btn-default" type="submit" value="Submit">
  <!-- Standard button -->
  <button type="button" class="btn btn-default">（默认样式）Default</button>

  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  <button type="button" class="btn btn-primary">（首选项）Primary</button>

  <!-- Indicates a successful or positive action -->
  <button type="button" class="btn btn-success">（成功）Success</button>

  <!-- Contextual button for informational alert messages -->
  <button type="button" class="btn btn-info">（一般信息）Info</button>

  <!-- Indicates caution should be taken with this action -->
  <button type="button" class="btn btn-warning">（警告）Warning</button>

  <!-- Indicates a dangerous or potentially negative action -->
  <button type="button" class="btn btn-danger">（危险）Danger</button>

  <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  <button type="button" class="btn btn-link">（链接）Link</button>
  <!-- 上下文的颜色 -->
  <p>我是小白龙</p>
  <p class="text-muted">我是铁蛋儿</p>
  <!-- 下拉三角 -->
  <span class="caret"></span>
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  <!-- 表格 -->
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

四，Bootstrap栅格系统

作用：设置子元素在不同档位下的布局；

https://v3.bootcss.com/css/#grid

1，介绍

栅格系统，在各个档位下，控制子元素布局不同；

将版心宽度均分为12份； 

各个档位下都有预制好的类前缀：

 

超小屏草(手机)

< 768px

小屏设备(平板)

> =768px

中等屏草(桌面显示器)

> = 992px

宽屏设备(大桌面显示器)

> =1200px
.container最大宽度 自动(100%) 750px 970px 1170px
类前缀 .col-xS- .col-sm- .col-md- .col-lg-
列(column)数 12

类前缀：

  • 超小屏（xs : extra small）：手机； 
  • 小屏（sm : small） ：平板； 
  • 中屏（md: medium）：桌面； 
  • 大屏（lg: large）：大桌面；

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创 建好的布局中，控制不同的档位下，列的子元素占有几份

2，基本使用

<!-- 中屏和以上占有6份 --> 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-6">.col-md-6</div> 
        <div class="col-md-6">.col-md-6</div> 
    </div> 
</div> 
<!-- 各个档位下，按照各个档位下布局 --> 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-6 col-lg-4">1</div> 
        <div class="col-md-6 col-lg-8">2</div> 
    </div> 
</div>

举例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap Template</title>

  <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
  <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  <!-- 条件注释:解决小于IE9的版本一些问题 -->
  <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .son {
      height: 30px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-2 son">a</div>
      <div class="col-md-6 col-lg-8 son">b</div>
      <div class="col-lg-2 son">c</div>
    </div>
    <!-- 左右对齐-->
    <div class="row">
      <!-- 如果只有一个盒子 那么就偏移 = 12-4-4  -->
      <div class="col-lg-4 son">1</div>
      <div class="col-lg-4 col-lg-offset-4 son">2</div>
    </div>

    <!-- 居中-->
    <div class="row">
      <!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
      <div class="col-md-8 col-md-offset-2 son">中间盒子</div>
    </div>
  </div>
</body>

</html>

3，特点：

单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份； 

多个类前缀：分别按照各个档位列划分生效； 

每个子项：默认左右15px的padding； 

行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；

4，列嵌套

操作：可以在已经分好的子元素中内部，继续进行列的划分（共12份）；

效果：继续在分好的布局内继续划分； 

语法：

<!-- 直接嵌套 --> 
<div class="col-sm-4"> 
    <div class="col-sm-6">小列</div> 
    <div class="col-sm-6">小列</div> 
</div> 

<!-- 使用row嵌套 --> 
<div class="col-sm-4"> 
    <!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; --> 
    <div class="row"> 
        <div class="col-sm-6">小列</div> 
        <div class="col-sm-6">小列</div> 
    </div> 
</div>

5，列偏移

操作：是划分好的子项进行列的份数偏移 

场景：左右布局，居中布局； 

语法：

<!-- 左右对齐--> 
<div class="row"> 
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4 --> 
    <div class="col-lg-4">1</div> 
    <!-- 在4份的基础上 偏移4份 自身占4份 故左右对齐 --> 
    <div class="col-lg-4 col-lg-offset-4">2</div> 
</div> 

<!-- 居中--> 
<div class="row"> 
    <!-- 如果只有一个盒子 那么就偏移 = 2 8 2 --> 
    <!-- 偏移2份 占8份 还剩2份 故居中 --> 
    <div class="col-md-8 col-md-offset-2">中间盒子</div> 
</div>

6，响应式工具

BS :预制类名 

可以控制元素在各个档位下进行显示或隐藏； 

语法：

注意：和列类前缀的参数形成对比记忆， 

  • col-sm-* 是超小屏（包含）以上的屏幕都是这个份数的划分； 
  • 响应式工具 只是对当前档位下的类前缀类名生效；

举例：控制元素在档位下的显示与隐藏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap Template</title>

  <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
  <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  <!-- 条件注释:解决小于IE9的版本一些问题 -->
  <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .son {
      height: 30px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-mg-3 son">1</div>
    <div class="col-mg-3 son">2</div>
    <div class="col-mg-3 son hidden-md">3</div>
    <div class="col-mg-3 son">4</div>
  </div>
</body>

</html>

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

猜你喜欢

转载自blog.csdn.net/qq_41528502/article/details/111034806
今日推荐
周排行
教你如何约女孩子的方式去理解（TCP三次握手与四次挥手）
android按压背景
【量化小讲堂-Python&amp;Pandas系列10】如何判断一个策略的好坏？(附代码)
编程题：利用链表实现栈
盘点47条 Allegro 使用技巧，你都知道吗？
在VMware Workstation中安装CentOS
二叉树的实现
cmake安装jsoncpp
ReactNative开发城市列表页
最全前端学习资源
每日归档
更多
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022