媒体查询：

针对不同的屏幕宽度，设置了不同的css样式，实现差异化的效果。语法:

@media （媒体特性） ｛

    选择器｛

        样式

    ｝

｝

举例：实现小于等于767px屏幕宽度的时候，body背景颜色为（darkcyan）

@media (max-width: 767px) {
            body {
                background-color: darkcyan;
            }
        }

利用媒体查询实现不同的屏幕宽度对应不同的布局，从而实现响应式布局的效果。

媒体查询的引入方式：

当将外部已经准备好的媒体查询css样式引入到当前html页面时；
方法与link.css引入大致相同；
只是需要额外添加media=all“（min-width：992px）”属性；
具体写法如下：

<link rel="stylesheet" media="(min-width: 992px)" href="./992.css">

媒体查询-应用-隐藏

在布局的过程中，随着屏幕大小的变化；
相同宽度内容可能需要相应的增减；
屏幕窄的时候布局与屏幕宽的时候布局不同；
为了适应这种布局，可以使用媒体查询将需要在某种尺寸以下需要隐藏的模块进行隐藏。案例如下：

    .left {
      float: left;
      width: 300px;
      height: 600px;
      background-color: antiquewhite;
    }

    .right {
      height: 600px;
      background-color: skyblue;
    }

    /* 需求，小于1200px时，左边盒子消失 */
    @media (max-width:1199px) {
      .left {
        display: none;
      }
    }

当视口宽度小于1200px的时候，
左边的盒子会通过（display：none；）隐藏起来。
ps：媒体查询中是max-width：1199px而不是1200px是因为解读为。
当屏幕小于等于1199的时候，所以小于1200px写做如此。

-----------------------------------------------------分割线

Bootstrap前端框架初识。

Bootstrap框架是一种本身就封装了大量的css样式JS样式的开源框架，
供开发者使用。方便开发者在开发过程中可以通入直接引入调用类名等迅速完成页面的开发布局，效果的应用。
更多详细介绍可以通过Bootstrap官网查看www.bootcss.com/
本篇使用的是Bootstrap v3版直接通过入门下载
“用于生产环境的 Bootstrap”即可
里面有详细使用方法。下面主要就几个常用的结合案例归纳。

格栅系统

格栅系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入在这些创建好的布局中。具体的格栅系统工作原理可以通过官网查看v3.bootcss.com/css/#grid

格栅工作参数

格栅原理参数.png

下面通过实例还有模型图可以一一对照参数看懂

格栅系统实例.png

    <title>栅格系统</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1- dist/css/bootstrap.min.css" />
    <style>
        div {
            height: 60px;
            background-color: #6cf;
            border: 4px solid orange;
        }
    </style>
</head>

<body>
    <!-- 
      原理： 利用媒体查询配合浮动以及百分比布局
      需求: 
        大屏和中屏: 一行排列4个内容; 
        小屏：一行排列2个内容；
        超小屏：一行排列1个内容
     -->
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">1</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">2</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">3</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">4</div>
</body>

上述代码可以实现：
在屏幕视口小于768px时，每个div占用12份格子（也就是默认充满整行）
在屏幕视口大于等于768px且小于992px时，每个div占用6份格子（也就是一行2个div盒子布局）
在屏幕视口大于等于992px且小于1200px时，每个div占用3份格子（也就是一行4个div盒子布局）
在屏幕视口大于等于1200px时，每个div盒子占用3份格子（也就是一行4个div盒子布局）

原理如下：

格栅系统将屏幕宽度视口分成12等份，
利用媒体查询封装好了css样式。
设计了（超小屏幕、小屏幕、中等屏幕、大屏幕等四种）
对应的，在不同视口尺寸内，布局可以对应的进行灵活调整，
极大的方便了开发者在开发过程中迅速布局。

类名：col-md（尺寸）-份数

全局css样式

按钮、表单、表格

在Bootstrap框架内的css样式，有现成的按钮、表单、表格拿来即用，也可以按照自己的需求进行简单的修改，以达到差异化样式。

整个框架样式内容很多。不展开叙述。

初识Bootstrap前端框架