[前端学习笔记] CSS移动端响应式布局

一、响应式布局

1. 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，能够根据不同的屏幕尺寸展示不同的样式。
2. 响应式布局原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。屏幕大致可以分为以下四类：
   超小屏幕（手机）：小于768px
   小屏设备（平板）：大于等于768px，小于992px
   中等屏幕（桌面显示器）：大于等于992px，小于1200px
   宽屏设备（大桌面显示器）：大于等于1200px

<!-- 响应式开发里面，首先需要一个布局容器 -->
<div class="container"></div>
<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. 大屏幕下【大于等于1200px】 布局容器修改为1170px */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
</style>

二、BootStrap框架

框架/架构即一套完整的网页功能解决方案，控制权在框架本身，有预制样式库、组件和插件。使用者需要按照框架规定的规范进行开发。
BootStrap框架来自Twitter，是目前最受欢迎的前端框架，使Web开发更加快捷。
它的优点：
1）标准化的html+css编码规范
2）提供了一套简洁、直观、强悍的组件
3）有自己的生态圈，不断的更新迭代
4）让开发更简单，提高了开发效率
BootStrap V3 中文文档
下载BootStrap后，将相应的样式文件引入到项目中：

根据BootStrap中文文档中提供的样式选择项目中用到的，直接复制到相应的位置即可实现。示例前的代码要写在head里。

<!-- 视口的宽度和设备一致，默认的缩放比例和PC一致，用户不能自行缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
  <! 解决IE9以下浏览器对HTML5新增标签的不识别，导致CSS不起作用的问题 -->
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <!-- 解决IE9以下浏览器对CSS3 Media Query不识别的问题 -->
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
<!-- 一定要引入此文件！！ -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  
<!-- ---------------------------示例----------------------------- -->
<!-- 按钮示例 -->
    <button type="button" class="btn btn-danger">登录</button>
<!-- 字体图标示例 -->
    <span class="glyphicon glyphicon-search"></span>  

响应式布局容器与流式布局容器对比：

<!-- 
    响应式布局容器（固定宽度）
    1）超小屏（100%）
    2）小屏（>=768px）宽度定为750px
    3）中屏（>=992px）宽度定为970px
    4）大屏（>=1200px）宽度定为1170px
-->
  <div class="container">123</div>
  <!-- 流式布局容器（100%宽度）占据全部视口的容器，适合单独做移动端开发 -->
  <div class="container-fluid">123</div>

三、栅格系统

1. 栅格系统（GridSystems）,也称网格系统。指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
2. Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕/视口尺寸的增加，系统自动分为最多12列。Bootstrap里面container宽度是固定的，但在不同屏幕下container宽度发生变化，栅格系统把container分为12等份。

<div class="container">
		<!-- 新的一行 -->
        <div class="row">
            <!-- 
              类前缀：
                   在宽屏(large) 		col-lg-占的份数
                   在中屏(medium) 		col-md-占的份数
                   在小屏(small) 		col-sm-占的份数
                   在超小屏(extra small) col-xs-占的份数
             -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">b</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">c</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">d</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个的container的宽度 -->
        <div class="row">
            <div class="col-lg-6">a</div>
            <div class="col-lg-2">b</div>
            <div class="col-lg-2">c</div>
            <div class="col-lg-2">d</div>
        </div>
        <!-- 如果孩子的份数相加小于12 则占不满整个container的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">a</div>
            <div class="col-lg-2">b</div>
            <div class="col-lg-2">c</div>
            <div class="col-lg-1">d</div>
        </div>
        <!-- 如果孩子的份数相加大于12 则会多于的那一列会另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">a</div>
            <div class="col-lg-2">b</div>
            <div class="col-lg-2">c</div>
            <div class="col-lg-3">d</div>
        </div>
    </div>

3. 栅格系统列嵌套

<div class="container">
        <div class="row">
            <div class="col-md-4">
<!-- 列嵌套最好加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>

4. 栅格系统列偏移

<div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- col-md-offset- 给右侧的盒子加左外边距-->
            <!-- 偏移到右侧，则偏移的份数 12-3-3=6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 只有一个盒子居中，偏移的份数=(12-8)/2=2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
</div>

5. 栅格系统列排序

<div class="container">
        <div class="row">
            <!-- 
                col-md-push 向右推
                col-md-pull 向左拉
             -->
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>

6. 栅格系统显示与隐藏

<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <!-- visible-lg/md/sm/xs 在什么屏幕下显示 -->
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <!-- hidden-lg/md/sm/xs 在什么屏幕下隐藏 -->
            <div class="col-xs-3 hidden-md hidden-xs">我会变没哦</div>
            <div class="col-xs-3">4</div>
        </div>
</div>

四、开发步骤

根据实际的设计稿进行开发，例如一份设计稿：
中屏幕和大屏幕布局一致，那么列定义为col-md-(大于等于970)即可；
小屏幕和超小屏幕有不同需求，需要改变布局；
则先布局md以上的PC端，再根据需求修改小屏和超小屏的特殊布局样式。

五、响应式布局缺点

·优点是面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。
·缺点是兼容各种设备工作量大，效率低下代码累赘，难以维护，且会出现隐藏无用的元素，加载时间加长。其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。