作者: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的属性。

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部