自适应卡片布局要点

最重要的点便是媒体查询，与min-width和max-width（根据卡片内容是否可以完全撑起卡片来进行选择）

配合float布局（Grid布局还未使用过，应该很好用）

需要通过伸缩页面，观察flat布局的元素在哪个位置上发生掉落，即该点页面的可视区域宽度即为 媒体查询的宽度

监听页面可视区域的代码

 //加载页面时执行一次
   changeMargin();
      //监听浏览器宽度的改变
      window.onresize = function(){
          changeMargin();
      };
      function changeMargin(){
          //获取网页可见区域宽度
          let docWidth = document.body.clientWidth;
          console.log(docWidth)
      }