CSS 媒体查询 - 示例
CSS 媒体查询 - 更多示例
让我们来看一些使用媒体查询的更多示例。
媒体查询是为不同设备提供定制样式表的一种流行技术。为了演示一个简单的例子，我们可以为不同的设备更改背景颜色
示例
/* 将 body 的背景颜色设置为 tan */
body {
background-color: tan;
}
/* 在屏幕宽度小于等于 992px 时，将背景颜色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在屏幕宽度小于等于 600px 时，将背景颜色设置为 olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
自己动手试一试 »
您是否想知道为什么我们使用 992px 和 600px？它们是我们称之为设备的“典型断点”。您可以在我们的响应式网页设计教程中了解更多关于典型断点的信息。
菜单的媒体查询
在此示例中，我们使用媒体查询创建了一个响应式导航菜单，其设计在不同的屏幕尺寸下有所不同。
大屏幕
小屏幕
示例
/* 导航栏容器 */
.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 支持，请使用浮动（如上所示）。
要了解有关 Flex Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 章节。
要了解有关响应式网页设计的更多信息，请阅读我们的响应式网页设计教程。
示例
/* Flexbox 的容器 */
.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> 的 font-size 设置为 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸小于等于 600px，则将 <div> 的 font-size 设置为 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己动手试一试 »
灵活的图片库
在此示例中，我们将媒体查询与 flexbox 结合使用来创建响应式图片库
灵活的网站
在此示例中，我们将媒体查询与 flexbox 结合使用来创建响应式网站，其中包含灵活的导航栏和灵活的内容。
方向：肖像/风景
媒体查询还可以根据浏览器的方向更改页面的布局。
您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时应用，即所谓的“风景”方向
示例
如果方向为风景模式，则使用浅蓝色背景色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己动手试一试 »
最小宽度到最大宽度
您还可以使用 (max-width: ..) and (min-width: ..) 值来设置最小宽度和最大宽度。
例如，当浏览器的宽度在 600px 到 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 @media 参考
有关所有媒体类型和功能/表达式的完整概述，请参阅我们 CSS 参考中的 @media 规则。
提示：要了解有关响应式网页设计（如何针对不同设备和屏幕）以及使用媒体查询断点的更多信息，请阅读我们的响应式网页设计教程。
