css媒体查询标准,CSS 媒体查询 - 实例

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

大型屏幕：

中等屏幕：

小型屏幕：

实例

/* 创建彼此相邻浮动的四个相等的列 */

.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;

}

}