前端必知必会-CSS媒体查询范例

---

CSS 媒体查询范例

媒体查询是一种流行的技术，用于向不同设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色：

示例

/* 将 body 的背景颜色设置为棕褐色 */
body {
background-color: tan;
}

/* 在 992px 或更小的屏幕上，将背景颜色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}

/* 在 600px 或更小的屏幕上，将背景颜色设置为橄榄色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}

菜单的媒体查询

在此示例中，我们使用媒体查询创建响应式导航菜单，该菜单在不同屏幕尺寸上的设计有所不同。

示例

/* 导航栏容器 */
.topnav {
overflow: hidden;
background-color: #333;
}

/* 导航栏链接 */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* 在宽度为 600px 或更小的屏幕上，使菜单链接堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}

列的媒体查询

媒体查询的常见用途是创建灵活的布局。在此示例中，我们根据不同的屏幕尺寸创建在四列、两列和全宽列之间变化的布局：

示例

/* 创建四个相等的列，彼此相邻浮动 */
.column {
float: left;
width: 25%;
}

/* 在宽度为 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}

/* 在宽度为 600px 或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

提示：创建列布局的更现代方法是使用 CSS Flexbox（见下面的示例）。但是，Internet Explorer 10 及更早版本不支持它。如果您需要 IE6-10 支持，请使用浮动（如上所示）。

示例

/* 弹性框的容器 */
.row {
display: flex;
flex-wrap: wrap;
}

/* 创建四个相等的列 */
.column {
flex: 25%;
padding: 20px;
}

/* 在宽度为 992px 或更小的屏幕上，将四列改为两列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}

/* 在宽度为 600px 或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}

使用媒体查询隐藏元素

媒体查询的另一个常见用途是隐藏不同屏幕尺寸上的元素：

示例

/* 如果屏幕尺寸为 600px 或更小，则隐藏元素 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

使用媒体查询更改字体大小

您还可以使用媒体查询来更改元素在不同屏幕尺寸上的字体大小：

示例

/* 如果屏幕尺寸大于 600px 宽，则将 <div> 的字体大小设置为 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}

/* 如果屏幕尺寸为 600px 宽或更小，则将 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

灵活的图片库

在此示例中，我们将媒体查询与弹性框结合使用，以创建响应式图片库：

示例

在此示例中，我们将媒体查询与弹性框结合使用，以创建响应式网站，其中包含灵活的导航栏和灵活的内容。

示例

方向：纵向/横向

媒体查询还可用于根据浏览器的方向更改页面布局。

您可以拥有一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的“横向”方向：

示例
如果方向为横向模式，则使用浅蓝色背景颜色：

@media only screen and (orientation: Landscape) {
body {
background-color: lightblue;
}
}

最小宽度到最大宽度

您还可以使用 (max-width: …) 和 (min-width: …) 值来设置最小宽度和最大宽度。

例如，当浏览器的宽度在 600 到 900px 之间时，更改 <div> 元素的外观
:

示例

@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}

使用附加值：在下面的示例中，我们使用逗号向现有的媒体查询添加附加媒体查询：

示例

/* 当宽度介于 600px 和 900px 之间或高于 1100px 时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}

---

总结

本文介绍了CSS媒体查询范例，如有问题欢迎私信和评论