自用响应式

   /* 手机端  这段代码的意思是当页面宽度小于749px的时候执行下面的CSS */
      @media only screen and (max-width: 767px) {
        body {
          background: brown;
        }
      }
      /* 平板 这段代码的意思是当页面宽度大于768px小于991px的时候执行下面的CSS。 */
      @media screen and (min-width: 768px) and (max-width: 991px) {
        body {
          background: yellow;
        }
      }

      /* 中等pc端 这段代码的意思是当页面宽度大于992px小于1199px的时候执行下面的CSS。 */
      @media screen and (min-width: 992px) and (max-width: 1199px) {
        body {
          background: rgb(41, 235, 41);
        }
      }

      /* 放大后pc端 然后就是当浏览器尺寸大于1200px以上时候的代码了： */
      @media screen and (min-width: 1200px) {
        body {
          background: orange;
        }
      }