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>
    

實現移動端到電腦端屏幕適配

使用媒體查詢要從小尺寸到大尺寸進行設置