1、什么是媒体查询？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2、媒体查询与弹性盒布局的适用情况

媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒

3、三栏布局--》两栏布局--》一栏布局

<style>
        @media screen and (min-width:1100px){ /*三栏布局*/
            .box1{width: 100px;} /*没有写高度，由内容撑起来*/
            .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>