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>
