【前端】08 - 移动端WEB开发之响应式布局

1. 响应式开发原理

1.1 响应式开发原理

  1. 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
  1. 设备的划分情况：
尺寸 定义
< 768px 超小屏幕（手机）
768px~992px 小屏设备（平板）
992px~1200px 中等屏幕（桌面显示器）
> 1200px 宽屏设备（大桌面显示器）

1.2 响应式布局容器

  1. 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

  2. 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

  3. 父容器版心的尺寸划分:

屏幕大小 设置宽度
超小屏幕（手机，小于 768px） 设置宽度为 100%
小屏幕（平板，大于等于 768px） 设置宽度为 750px
中等屏幕（桌面显示器，大于等于992px） 宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px） 宽度设置为1170px
  1. 但是我们也可以根据实际情况自己定义划分。

2. bootstrap的介绍

2.1 Bootstrap简介

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

  2. 参考网站推荐 : 中文网 官网 推荐网站。

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

2.2 bootstrap 优点

  1. 标准化的 html+css编码规范。

  2. 提供了一套简洁、直观、强悍的组件。

  3. 有自己的生态圈，不断的更新迭代。

  4. 让开发更简单，提高了开发的效率。

2.3 版本简介

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

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

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

2.4 bootstrap 基本使用

Bootstrap 使用四步曲：
  1. 创建文件夹结构
创建文件夹目录
  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,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>BootStrap的使用</title>
    <!-- Bootstrap 核心样式-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--[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>

<div class="btn btn-success">成功</div>
<div class="btn btn-danger">危险</div>
</body>
</html>
  1. 引入相关样式文件 :
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  1. 栅格系统的简单使用:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <title>栅格系统的使用</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <style>

        div[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>
    <!-- 1. 如果孩子份数相加等于 12 则孩子能占满整个的container的宽度 -->


    <!-- 2. 如果孩子的份数相加小于 12 则会占不满整个container的宽度会有空白 -->
    <div class="row">
        <div class="col-lg-2">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
        <div class="col-lg-3">5</div>
    </div>

    <!-- 3. 如果孩子的分数相加大于 12 多余的一列则会另起一行显示 -->
    <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 class="col-lg-3">5</div>
    </div>
</div>
</body>
</html>

2.5 bootstrap 布局容器

1.Bootstrap 需要为页面内容和栅格系统包裹一个.container 或者.container-fluid 容器，它提供了两个作此用处的类。

  1. .container
响应式布局的容器 固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 (>=992px ) 宽度定为 970px
小屏 ( >=768px ) 宽度定为 750px
超小屏 (100%)
  1. .container-fluid
流式布局容器 百分百宽度
占据全部视口 （ viewport ）的容器。

2.6 bootstrap 栅格系统

  1. Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport） 尺寸的增加，系统会自动分为最多 12 列。

  2. 栅格系统用于通过一系列的行（ row ）与列（ column ）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

  • 按照不同屏幕划分为1~12 等份。
  • 行（row） 可以去除父容器作用15px的边距。
  • xs-extra small：超小；sm-small：小； md-medium：中等； lg-large：大。
  • 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 每一列默认有左右15像素的 padding。
  • 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"。
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        div[class^="col"] {
            border: 1px solid #ccc;
        }
    </style>
    <title>不同屏幕下的显示效果</title>
</head>
<body>
<div class="container">
    <!-- 这个的意思就是: 大屏幕(>=1200px)每行显示四份 中屏幕 (>=992px) 每行显示 三份 小屏每行显示两列
            超小屏 每行显示 1 列
      -->
    <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>
</body>
</html>
大屏
中屏
小屏
超小屏

2.7 栅格嵌套

  1. 栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列.col-sm-*元素到已经存在的 .col-sm-*元素内。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .row>div{
            background-color: pink;
        }
    </style>
    <title>栅格系统的嵌套</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <!-- 列嵌套最好加一个 row -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="row">
                    <div class="col-sm-4 col-xs-6" style="background-color: aqua;">a</div>
                    <div class="col-sm-8 col-xs-6" style="background-color: purple;">b</div>
                </div>
            </div>
            <!-- 列嵌套最好加一个 row -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                2
            </div>
            <!-- 列嵌套最好加一个 row -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                3
            </div>
            <!-- 列嵌套最好加一个 row -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                4
            </div>
        </div>
    </div>

</body>
</html>

2.8 栅格系统的列偏移

  1. 使用.col-md-offset-* 类可以将列在中屏 下向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .row div {
            background-color: pink;
        }
    </style>
    <title>栅格系统的列偏移</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-3  col-md-4">1</div>
            <!-- 在中屏下右侧盒子向右偏移4份 -->
            <div class="col-lg-3 col-md-4 col-md-offset-4">2</div>
        </div>

        <!-- 如果只有一个盒子需要进行居中对齐 col-md-offset-2 这其实就是给盒子添加一个margin值 -->
        <div class="col-md-8 col-md-offset-2"></div>
    </div>

</body>
</html>

2.9 栅格系统的列排序

  1. 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
  <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

3. 响应式工具 hidden-* 和 visible-*

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


    hidden-*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>

        .row div {
            background-color: pink;
        }

    </style>
    <title>栅格系统的响应式工具-显示和隐藏</title>
</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 hidden-md">4</div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <span class="visible-lg">大屏</span>
        </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 hidden-md">4</div>
    </div>
</div>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。