列的媒体查询
媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：
大型屏幕：
中等屏幕：
小型屏幕：
实例
/* 创建彼此相邻浮动的四个相等的列 */
.column {
float: left;
width: 25%;
}
/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
提示：更现代的创建列布局方法是使用 CSS Flexbox(请参见下面的例子)。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动(如上所示)。
如需学习有关弹性框布局模块的更多知识，请学习 CSS Flexbox 这一章。
如需学习有关响应式 Web 设计的更多知识，请学习我们的 响应式 Web 设计教程。
实例
/* 弹性盒的容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 创建四个相等的列 */
.column {
flex: 25%;
padding: 20px;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
