移动端WEB开发之响应式布局

博主： 9075512
发布时间：2021 年 08 月 07 日
624 次浏览
暂无评论
11073字数
分类：其他

# 移动端WEB开发之响应式布局

### 1. 响应式开发原理

#### 1.1 响应式开发原理

就是**使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的**。

响应式开发可以实现，一套界面在不同终端进行正常显示。

移动端设备的屏幕分辨率太多，响应式将这些进行了归类：

| 设备划分                 | 尺寸区间             |
| ------------------------ | -------------------- |
| 超小屏幕（手机）         | < 768px              |
| 小屏设备（平板）         | >= 768px  ~  < 992px |
| 中等屏幕（桌面显示器）   | >= 992px  ~  <1200px |
| 宽屏设备（大桌面显示器） | >= 1200px            |

#### 1.2 响应式布局容器

- 问题：
  - 响应式要适配各种大小屏幕，那么我们通过媒体查询，来控制界面中的每个元素的大小么？
  - 这样太麻烦了，可以使用响应式。
- 响应式介绍：
  - 响应式需要一个**父级做为布局容器**，**来配合子级元素来实现变化效果**。
  - 原理就是在不同屏幕下，**通过媒体查询来改变这个布局容器的大小**，**再改变里面子元素的排列方式和大小**，从而实现不同屏幕下，看到不同的页面布局和样式变化。
- 问题：
  - 父容器的大小如何确定呢？
  - 响应式进行了父容器尺寸的划分
- 父容器版心的尺寸划分
  - 超小屏幕（手机，小于 768px）：设置宽度为 100% （屏幕小的，我们让界面跟屏幕一般大）
  - 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  - 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  - 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
  - 规律：父容器的宽度总是比屏幕小一点，这是因为我们在处理的时候，让父容器居中，两边有些许空白，这样更好看，所以父容器，也可以叫做版心。
  - 但是我们也可以根据实际情况自己定义划分

案例代码：

```html
<style>
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
  
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }
        /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
  
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
  
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
  
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    
    <div class="container"></div>
</body>
```

**总结**：其实都是一样的：

```
之前的rem布局，我们是根据媒体查询来控制html的font-size的大小，界面的元素尺寸都以font-size为单位，屏幕变化，font-size变化，进而影响界面的每个元素。
```

```
现在的响应式布局，我们是根据媒体查询控制父布局容器的宽度，界面的元素尺寸都以父布局容器为参考，以父布局容器的百分比来设置元素大小。这样的话，屏幕变化，父布局容器宽度变化，进而影响界面的每个元素。
```

#### 1.3响应式案例-导航栏

代码：

```html
<style>
        * {
            margin: 0;
            padding: 0;
        }
  
        ul {
            list-style: none;
        }
  
        .container {
            width: 750px;
            margin: 0 auto;
        }
  
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
  
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;/*布局中的元素，都以父容器的宽度百分比设置大小*/
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
```

**总结**：

此案例，只处理了两种范围的屏幕： 小屏幕pad，超小屏幕（手机）

在范围切换时，界面布局发生了改变，由1/8，变为1/3  (如果范围切换时，布局可能发生变化)  ***

在某一个范围内，屏幕继续变化，界面元素依然是等比例缩放

### 2. bootstrap的介绍

#### 2.1 Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端**框架**。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

[中文网](lhttp://www.bootcss.com/)  [官网](lhttp://getbootstrap.com/)  [推荐网站](http://bootstrap.css88.com/)

Bootstrap：是用于开发响应式布局，移动设备优先的web项目。

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

组件：很多样式的下拉菜单，导航栏，按钮等等组件。（**这些带样式的，界面常用的效果，称之为组件**）

插件：**js代码写出来的效果**（会自动轮播的轮播图等），**称之为插件**。

**框架**：**其实就是一个成规模的工具**。**有很多现成的样式（css代码），和功能（js代码）**。

#### 2.2 bootstrap优点

+ 标准化的html+css编码规范
+ 提供了一套简洁、直观、强悍的组件
+ 有自己的生态圈，不断的更新迭代
+ 让开发更简单，提高了开发的效率

#### 2.3 版本简介

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。

4.x.x：最新版，目前还不是很流行

#### 2.4 bootstrap基本使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。

那么我们接下来就需要看一下如何使用bootstrap框架的样式库：

框架的控制权在框架制作者，而开发者(使用者)要按照框架所规定的某种规范进行开发。

Bootstrap 使用四步曲：

1. 创建文件夹结构

![](1.png)

将bootstrap中的三个文件夹（右侧），复制到自己创建的bootstrap文件夹（左侧）中。
2. 创建 html 骨架结构 （下面是最简单的一个Bootstrap的一个例子）

```html
   <!DOCTYPE html>
   <html lang="zh-CN">
    <head>
       <meta charset="utf-8">
       
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       
       <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

</head>

</html>
   ```
3. 引入相关样式文件

```
   
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   ```
4. 书写内容

这里我们直接在body中添加123即可：

**效果**：123没了边距，就说明我们引入bootstrap样式库成功了。

![](bootstrap-demo.jpg)
5. 直接使用bootstrap提供的样式

**代码**：在刚刚的index.html中添加如下代码

```html
   <style>
           /*利用我们自己写的样式覆盖原先的样式*/

.login {
               width: 80px;
               height: 45px;
           }
       </style>
   </head>

<body>
       
       <button type="button" class="btn btn-success">Success </button>
       <div class="btn btn-success login">登陆</div>
       <div class="btn btn-danger">未成功</div>
   </body>
   ```

**效果**：

![](bootstrap-demo2.jpg)

**总结**：

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于**知道它定义了哪些样式，以及这些样式能实现什么样的效果**

**其实这些样式，大家是没必要记的，只需要知道网站，能够自己上去查找，找到自己想要的效果即可**：

收藏网站：http://bootstrap.css88.com/

#### 2.5 bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个容器，**Bootstrap预先定义好了两个容器样式类**：

.container

+ `.container` 类用于固定宽度并支持响应式布局的容器。
+ `.container` 类，已经通过媒体查询处理了屏幕范围：
+ 大屏 ( >=1200px)  宽度定为 1170px
+ 中屏 ( >=992px)   宽度定为  970px
+ 小屏 ( >=768px)   宽度定为  750px
+ 超小屏  (100%)

.container-fluid

+ 用于流式布局的容器，宽度为百分百，占据全部视口（viewport）的容器
+ 适合于单独移动端开发

**两者区别**：

（1）**container-fluid的width是100％**，**而container的width是用媒体查询获得的动态尺寸**。两者样式肯定是不一样的。并且由于padding的原因两者不可用嵌套，他们就是提供两种视觉风格。

（2）container-fluid和container 全部都是响应式的布局。只是container有1个98px的margin 存在 Container-fluid 没有。

**代码**：

<body>
    <div class="container">123</div>
    <div class="container-fluid">123</div>
</body>
```

**效果**：

![](container.jpg)

**总结**：

意思就是我们想要使用boostrap进行布局，就必须包裹一个容器，而且这个容器使用的类必须是.container和.contianer-fluid。

#### 2.6 bootstrap栅格系统

##### 1. 介绍

- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
- Bootstrap里边的container的宽度是固定的，但是不同屏幕下，container的宽度不同，Bootstrap是将container进行12等份划分。
- 那么屏幕变化，container变化，12等份的每一份变化，我们的界面元素的大小依据每一等份来设置，那么也就实现了屏幕适配。
- **栅格系统**：其实就是网格布局，有行有列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

![](shange.png)

##### 2. 使用

Bootstrap针对不同的屏幕大小，设置了对应的类样式的前缀：

|                     | 超小屏幕（手机）< 768px | 小屏设备（平板）>=768px | 中等屏幕（桌面显示器）>=992px | 宽屏设备（大桌面显示器）>=1200px |
| ------------------- | ----------------------- | ----------------------- | ----------------------------- | -------------------------------- |
| .container 最大宽度 | 自动(100%)              | 750px                   | 970px                         | 1170px                           |
| 类前缀              | .col-xs-                | .col-sm-                | .col-md-                      | .col-lg-                         |
| 列（column）数      | 12                      | 12                      | 12                            | 12                               |

+ 按照不同屏幕划分为1~12 等份 （一般都是划分为2等份）
+ **我们实现列的平均划分  需要给列添加  类前缀**
+ **这样bootstrap才知道你是在哪个屏幕下，划分成几等份**
+ xs：extra small--超小； sm：small--小；  md：medium--中等； lg：large--大；
+ 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
+ 每一列默认有左右15像素的 padding

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
    </style>
</head>

</div>
</body>
```

**效果**：

![](01.jpg)

##### 3. 同时指定不同屏幕的类名

- 在屏幕不断变化的情况下，我们的界面布局可能会发生比较大的改变，比如大屏幕一行显示4列，小屏幕一行显示3列，这种效果应该如何处理呢？
- 可以同时为一列指定多个设备的类名，以便划分不同份数  例如 class="col-md-4 col-sm-6"

代码：

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
    </div>
</body>
```

效果：

超小屏幕：

![](04.jpg)

小屏幕：

![](03.jpg)

中屏幕：

![](05.jpg)

大屏幕：

![](02.jpg)

##### 4. 栅格嵌套-列嵌套

- 栅格系统内置的栅格系统将内容再次嵌套
- 简单理解就是一个列内再分成若干份小列
- 我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内
- 也就是将一个row+col添加到一个col中

**嵌套效果如下**：

![](06.jpg)

**嵌套语法如下**：

```

 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>
```

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>
```

**效果**：

![](07.jpg)

##### 5. 列偏移

- 使用 .col-md-offset-* 类可以将列向右侧偏移。
- 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

**列偏移效果如下**：

![](08.jpg)

**列偏移语法如下**：

```html

  <div class="row">
      <div class="col-lg-4">1</div>
      
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>
```

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

</div>
</body>
```

**效果**：

![](09.jpg)

##### 6. 列排序

- 有时候，我们希望左侧盒子与右侧盒子的顺序进行颠倒，那么这时候就需要用到列排序了
- 但是它这个排序不是添加序号，而是使用push和pull，推和拉来改变
- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

**列排序效果**：

![](10.jpg)

**列排序语法**：

```html

  <div class="row">
  	  
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

```

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>
```

**效果**：

![](11.jpg)

##### 7. 响应式工具

- 为了加快对移动设备友好的页面开发工作，
- 利用媒体查询功能，
- 并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

比如：

在大屏下，淘宝的第三列是显示的：

![](t01.jpg)

但是在小屏下，隐藏：

![](t2.jpg)

**语法**：

![](2.jpg)

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
  
        .row div:nth-child(3) {
            background-color: pink;
        }
  
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            
            <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
            <div class="col-xs-3">4</div>
        </div>

</div>
```

**效果**：

大屏幕：

![](h01.jpg)

中屏幕：

![](h02.jpg)

小屏幕：

![](h03.jpg)

超小屏幕：

![](h04.jpg)

最后修改：2022 年 01 月 08 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址 *

知名4428
表评论4428
九月
谢谢你是用我的头像接口
青城
这个介绍真的嘛
白哲
名称:白哲博客域名:http://blog.a-qiyu.cn...
Typecho
欢迎加入 Typecho 大家族

移动端WEB开发之响应式布局

9075512 • 2021 年 08 月 07 日

# 移动端WEB开发之响应式布局

### 1. 响应式开发原理

#### 1.1 响应式开发原理

就是**使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的**。

响应式开发可以实现，一套界面在不同终端进行正常显示。

移动端设备的屏幕分辨率太多，响应式将这些进行了归类：

#### 1.2 响应式布局容器

案例代码：

<body>
    
    <div class="container"></div>
</body>
```

**总结**：其实都是一样的：

#### 1.3响应式案例-导航栏

代码：

**总结**：

此案例，只处理了两种范围的屏幕： 小屏幕pad，超小屏幕（手机）

在范围切换时，界面布局发生了改变，由1/8，变为1/3  (如果范围切换时，布局可能发生变化)  ***

在某一个范围内，屏幕继续变化，界面元素依然是等比例缩放

### 2. bootstrap的介绍

#### 2.1 Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端**框架**。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

[中文网](lhttp://www.bootcss.com/)  [官网](lhttp://getbootstrap.com/)  [推荐网站](http://bootstrap.css88.com/)

Bootstrap：是用于开发响应式布局，移动设备优先的web项目。

组件：很多样式的下拉菜单，导航栏，按钮等等组件。（**这些带样式的，界面常用的效果，称之为组件**）

插件：**js代码写出来的效果**（会自动轮播的轮播图等），**称之为插件**。

**框架**：**其实就是一个成规模的工具**。**有很多现成的样式（css代码），和功能（js代码）**。

#### 2.2 bootstrap优点

+ 标准化的html+css编码规范
+ 提供了一套简洁、直观、强悍的组件
+ 有自己的生态圈，不断的更新迭代
+ 让开发更简单，提高了开发的效率

#### 2.3 版本简介

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。

4.x.x：最新版，目前还不是很流行

#### 2.4 bootstrap基本使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。

那么我们接下来就需要看一下如何使用bootstrap框架的样式库：

框架的控制权在框架制作者，而开发者(使用者)要按照框架所规定的某种规范进行开发。

Bootstrap 使用四步曲：

1. 创建文件夹结构

![](1.png)

将bootstrap中的三个文件夹（右侧），复制到自己创建的bootstrap文件夹（左侧）中。
2. 创建 html 骨架结构 （下面是最简单的一个Bootstrap的一个例子）

<title>Bootstrap 101 Template</title>

</html>
   ```
3. 引入相关样式文件

```
   
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   ```
4. 书写内容

这里我们直接在body中添加123即可：

**效果**：123没了边距，就说明我们引入bootstrap样式库成功了。

![](bootstrap-demo.jpg)
5. 直接使用bootstrap提供的样式

**代码**：在刚刚的index.html中添加如下代码

```html
   <style>
           /*利用我们自己写的样式覆盖原先的样式*/

.login {
               width: 80px;
               height: 45px;
           }
       </style>
   </head>

**效果**：

![](bootstrap-demo2.jpg)

**总结**：

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于**知道它定义了哪些样式，以及这些样式能实现什么样的效果**

**其实这些样式，大家是没必要记的，只需要知道网站，能够自己上去查找，找到自己想要的效果即可**：

收藏网站：http://bootstrap.css88.com/

#### 2.5 bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个容器，**Bootstrap预先定义好了两个容器样式类**：

.container

.container-fluid

+ 用于流式布局的容器，宽度为百分百，占据全部视口（viewport）的容器
+ 适合于单独移动端开发

**两者区别**：

（2）container-fluid和container 全部都是响应式的布局。只是container有1个98px的margin 存在 Container-fluid 没有。

**代码**：

<body>
    <div class="container">123</div>
    <div class="container-fluid">123</div>
</body>
```

**效果**：

![](container.jpg)

**总结**：

意思就是我们想要使用boostrap进行布局，就必须包裹一个容器，而且这个容器使用的类必须是.container和.contianer-fluid。

#### 2.6 bootstrap栅格系统

##### 1. 介绍

![](shange.png)

##### 2. 使用

Bootstrap针对不同的屏幕大小，设置了对应的类样式的前缀：

**代码**：

</div>
</body>
```

**效果**：

![](01.jpg)

##### 3. 同时指定不同屏幕的类名

代码：

效果：

超小屏幕：

![](04.jpg)

小屏幕：

![](03.jpg)

中屏幕：

![](05.jpg)

大屏幕：

![](02.jpg)

##### 4. 栅格嵌套-列嵌套

**嵌套效果如下**：

![](06.jpg)

**嵌套语法如下**：

```

 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>
```

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
        }
    </style>
</head>

**效果**：

![](07.jpg)

##### 5. 列偏移

- 使用 .col-md-offset-* 类可以将列向右侧偏移。
- 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

**列偏移效果如下**：

![](08.jpg)

**列偏移语法如下**：

```html

  <div class="row">
      <div class="col-lg-4">1</div>
      
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>
```

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

</div>
</body>
```

**效果**：

![](09.jpg)

##### 6. 列排序

**列排序效果**：

![](10.jpg)

**列排序语法**：

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

**效果**：

![](11.jpg)

##### 7. 响应式工具

- 为了加快对移动设备友好的页面开发工作，
- 利用媒体查询功能，
- 并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

比如：

在大屏下，淘宝的第三列是显示的：

![](t01.jpg)

但是在小屏下，隐藏：

![](t2.jpg)

**语法**：

![](2.jpg)

**代码**：

```html
<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">
    
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
  
        .row div:nth-child(3) {
            background-color: pink;
        }
  
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

</div>
```

**效果**：

大屏幕：

![](h01.jpg)

中屏幕：

![](h02.jpg)

小屏幕：

![](h03.jpg)

超小屏幕：

![](h04.jpg)

移动端WEB开发之响应式布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

欢迎使用 Typecho

每天60秒读懂世界

发送验证码倒计时

移动端WEB开发之响应式布局

ChatGPT账号密码生成器

移动端WEB开发之响应式布局

每天60秒读懂世界

用一行代码-重装系统

Vue3 动机和新特性

发送验证码倒计时

移动端WEB开发之响应式布局

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

移动端WEB开发之响应式布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款