作者:sunyin.liu

电脑不同屏幕自适应布局

 效果如上图

实现方式(纯css实现)

1..媒体查询实现

       @media screen and (min-width: 1621px) {
          .source-item-wrapper {
            max-width: 25%;
            flex-basis: 25%;
          }
        }
        @media screen and (max-width: 1620px) and (min-width: 1024px) {
          .source-item-wrapper {
            max-width: 33.3333%;
            flex-basis: 33.3333%;
          }
        }
        @media screen and (max-width: 1024px) and (min-width: 768px) {
          .source-item-wrapper {
            max-width: 50%;
            flex-basis: 50%;
          }
        }

根据不同屏幕设置 flex-basis和max-width的属性。