CSS3媒体查询（响应式布局）

媒体查询（响应式布局）
    pc、 pad 、phone (中小型网页)
      一套网页(pc、pad、phone) 

    网易严选（非响应式）
      pc 定宽
      mobile  响应式
    腾讯视频 （半响应式）复杂，to-c
      pc (响应 ：4k 2k 1080p 普通)  https://v.qq.com/
        1. 定宽？ 1190px (淘宝)
        2. 非定宽（响应 4k 2k 1080p 普通）
      mobile (响应)                https://m.v.qq.com/
    newbalance (全响应)中国、汇智网
      pc、mobile - 简单，小众
        https://www.newbalance.com.cn/
        https://www.newbalance.com.cn/

    黑话：
    to-C  client    个人（抖音、淘宝、京东）互联网
    to-B  business  企业级
    to-G  政府       学校/政府 - 监控终端、大屏、二手房交易网、健康码

    1. 如何实现
      1) 非响应式
        2套   
          - pc  
            1190px 宽度写死   400px 700px
          - mobile(响应式)
      2) 半响应式
          - pc（4k 2k 1080p 普通）
          - mobile(响应式) 宽度尽可能使用百分比
      3) 全响应式
          -pc、mobile (4k 2k 1080 普通 pad phone)
    2. 技术
      @media 判断媒体类型（屏幕类型）
      @media screen and (min-width:900px) and (max-width:1200px) {
        /* 当屏幕满足上述条件，执行该代码块内部的css*/
        .container {
          background-color: pink;
        }
      }
    3. bootstrap中响应式
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
      </div>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>