css页面自适应 媒体查询

代码：css代码

.wrap{
                display: flex;
                margin: 10px;
                flex-wrap: wrap;
                
            }
            
            @media screen and (max-width:569px) {
                .list-group{
                    width: 100%;
                }
            }
            @media screen and (min-width:570px) and (max-width:879px){
                .list-group{
                    width: 50%;
                }
            }
            @media screen and  (min-width:880px) {
                .list-group{
                    flex:1;
                }
            }
            
            
            .list-group{
                height: 149px;
                margin-bottom: 10px;
            }
            .inner-wrap{
                margin 0px 10px;
                width: 96%;
                height: 149px;
                border: 1px solid #00ADCA;
                border-radius: 5px;
            }

html代码

<div class="wrap">
            <div class="list-group">
                <div class="inner-wrap">
                    <div class="content">
                        我是内容
                    </div>
                </div>
            </div>
            <div class="list-group">
                    <div class="inner-wrap">
                        <div class="content">
                            我是内容
                        </div>
                    </div>
                </div>
            <div class="list-group">
                    <div class="inner-wrap">
                        <div class="content">
                            我是内容
                        </div>
                    </div>
                </div>
            <div class="list-group">
                    <div class="inner-wrap">
                        <div class="content">
                            我是内容
                        </div>
                    </div>
                </div>
            
        </div>
    

实现移动端到电脑端屏幕适配

使用媒体查询要从小尺寸到大尺寸进行设置