一.媒体查询

 /* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */

      @media (min-width:768px) {

        body {

          background-color: skyblue;

        }

      }

      /* 视口宽度大于等于992px 小于等于1199px， 网页背景色是绿色 #0a0 */

      @media (min-width:992px) {

        body {

          background-color: #0a0;

        }

      }

      /* 视口宽度大于等于1200px， 网页背景色是橙色 orange */

      @media (min-width: 1200px){

        body {

          background-color: orange;

        }

      }

二.bootstrap基本使用

1.<!-- 1.引入bootstrap的css文件 -->

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />

2.栅格系统

  <!--

      需求:

        大屏 lg 和中屏 md: 一行排列4个内容;

        小屏 sm：一行排列2个内容；

        超小屏 xs：一行排列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>

3.js效果引入

<script src="./js/jquery.js"></script>

    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>