1、什么是媒體查詢？

媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

2、媒體查詢與彈性盒布局的適用情況

媒體查詢：當(dāng)頁面的結(jié)構(gòu)發(fā)生變化的話最好使用媒體查詢。
彈性盒：如果只是寬高的變化，盡量使用彈性盒

3、三欄布局--》兩欄布局--》一欄布局

<style>
        @media screen and (min-width:1100px){ /*三欄布局*/
            .box1{width: 100px;} /*沒有寫高度，由內(nèi)容撐起來*/
            .box2{flex:1; }
            .box3{width: 100px;}
        }
        @media screen and (min-width:800px) and (max-width:1100px){ /*二欄布局*/
            .box1{width: 100px;}
            .box2{flex:1; }
            .box3{width: 100%;}
        }
        @media screen and (max-width:800px) { /*一欄布局*/
            .box1,.box2,.box3{width: 100%;}
        }
</style>