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

1. 响应式开发原理

1.1 响应式开发原理

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

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

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

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

1.2 响应式布局容器

  • 问题:

    • 响应式要适配各种大小屏幕,那么我们通过媒体查询,来控制界面中的每个元素的大小么?
    • 这样太麻烦了,可以使用响应式。
  • 响应式介绍:

    • 响应式需要一个父级做为布局容器来配合子级元素来实现变化效果
    • 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
  • 问题:

    • 父容器的大小如何确定呢?
    • 响应式进行了父容器尺寸的划分
  • 父容器版心的尺寸划分

    • 超小屏幕(手机,小于 768px):设置宽度为 100% (屏幕小的,我们让界面跟屏幕一般大)
    • 小屏幕(平板,大于等于 768px):设置宽度为 750px
    • 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
    • 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
    • 规律:父容器的宽度总是比屏幕小一点,这是因为我们在处理的时候,让父容器居中,两边有些许空白,这样更好看,所以父容器,也可以叫做版心。
    • 但是我们也可以根据实际情况自己定义划分

案例代码:

<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响应式案例-导航栏

代码:

<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 开发更加快捷。

中文网 官网 推荐网站

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. 创建文件夹结构

    将bootstrap中的三个文件夹(右侧),复制到自己创建的bootstrap文件夹(左侧)中。

  2. 创建 html 骨架结构 (下面是最简单的一个Bootstrap的一个例子)

    <!DOCTYPE html>
    <html lang="zh-CN">
     <head>
        <meta charset="utf-8">
        <!--要求当前网页使用IE浏览器最高版本edge的内核来渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口标签:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    
        <title>Bootstrap 101 Template</title>
    
        <!-- 条件注释,如果小于id9,就添加如下两个文件  (if 如果,lt 小于 less then)-->
        <!--第一句: 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题 -->
        <!--第二句: 解决ie9以下浏览器对 css3 Media Query 的不识别 -->
        <!--[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>
    </body>
    
    </html>
  3. 引入相关样式文件

    <!-- Bootstrap 核心样式-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  4. 书写内容

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

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

  5. 直接使用bootstrap提供的样式

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

    <style>
            /*利用我们自己写的样式覆盖原先的样式*/
    
            .login {
                width: 80px;
                height: 45px;
            }
        </style>
    </head>
    
    <body>
        <!-- 123 -->
        <button type="button" class="btn btn-success">Success </button>
        <div class="btn btn-success login">登陆</div>
        <div class="btn btn-danger">未成功</div>
    </body>

    效果

    总结

    直接拿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 没有。

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
</head>

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

效果

总结

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

2.6 bootstrap栅格系统

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

2. 使用

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

超小屏幕(手机)< 768px小屏设备(平板)>=768px中等屏幕(桌面显示器)>=992px宽屏设备(大桌面显示器)>=1200px
.container 最大宽度自动(100%)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12121212
  • 按照不同屏幕划分为1~12 等份 (一般都是划分为2等份)
  • 我们实现列的平均划分 需要给列添加 类前缀
  • 这样bootstrap才知道你是在哪个屏幕下,划分成几等份
  • xs:extra small--超小; sm:small--小; md:medium--中等; lg:large--大;
  • 列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15像素的 padding

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12 则会? 则占不满整个container 的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会?多于的那一列会 另起一行显示  -->

        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>


    </div>
</body>

效果

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

代码:

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
  
        .row:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<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>

效果:

超小屏幕:

小屏幕:

中屏幕:

大屏幕:

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

嵌套效果如下

嵌套语法如下

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

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <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">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <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>

效果

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

列偏移效果如下

列偏移语法如下

<!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <!-- 占4份,并且向右偏移4份 -->
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <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-3">左侧</div>
            <!-- 如果有俩盒子,想左右排列:偏移的份数就是: 12 - 两个盒子的份数 = 6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子想居中 :偏移的份数 = (12 - 8) /2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>

    </div>
</body>

效果

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

列排序效果

列排序语法

<!-- 列排序 -->
  <div class="row">
        <!-- 将左侧4份盒子,向右推8份的距离-->
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <!-- 将右侧8份盒子,向左拉4份的距离-->
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>
<!-- 怎么理解推和拉的方向?
    假设,人站在界面左侧:
        想将元素向右移动,那就是推,推过去。
        想将元素向左移动,那就是拉,拉过来。
-->

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <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>

效果

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

比如:

在大屏下,淘宝的第三列是显示的:

但是在小屏下,隐藏:

语法

代码

<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/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <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>

效果

大屏幕:

中屏幕:

小屏幕:

超小屏幕:

最后修改:2022 年 01 月 08 日
如果觉得我的文章对你有用,请随意赞赏