CSS 媒体查询 - 示例
CSS 媒体查询 - 更多示例
让我们看看使用媒体查询的一些更多示例。
媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以为不同的设备更改背景颜色
示例
/* 将 body 的背景颜色设置为 tan */
body {
background-color: tan;
}
/* 在屏幕宽度为 992 像素或更小的屏幕上，将背景颜色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在屏幕宽度为 600 像素或更小的屏幕上，将背景颜色设置为橄榄色 */
@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;
}
/* 在屏幕宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排排列 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
亲自尝试 »
列的媒体查询
媒体查询的常见用法是创建灵活的布局。 在这个例子中，我们创建一个布局，它根据不同的屏幕尺寸在四列、两列和全宽列之间变化
大屏幕
中等屏幕
小屏幕
示例
/* 创建四列相等，彼此浮动 */
.column {
float: left;
width: 25%;
}
/* 在屏幕宽度为 992 像素或更小的屏幕上，从四列变为两列 */
@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 章节。
要了解有关响应式网页设计的更多信息，请 阅读我们的响应式网页设计教程。
示例
/* 弹性盒容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 创建四个相等的列 */
.column {
flex: 25%;
padding: 20px;
}
/* 在屏幕宽度为 992 像素或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 当屏幕宽度小于或等于 600 像素时，将列堆叠在彼此之上，而不是并排显示 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
亲自尝试 »
使用媒体查询隐藏元素
媒体查询的另一个常见用途是在不同的屏幕尺寸上隐藏元素
示例
/* 如果屏幕尺寸小于或等于 600 像素，则隐藏该元素 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
亲自尝试 »
使用媒体查询更改字体大小
您还可以使用媒体查询在不同的屏幕尺寸上更改元素的字体大小
可变字体大小。
示例
/* 如果屏幕尺寸大于 600 像素，将 <div> 的字体大小设置为 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸小于或等于 600 像素，将 <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 到 900 像素之间时，更改 <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 规则。
提示： 要了解有关响应式网页设计（如何针对不同的设备和屏幕）的更多信息，请使用媒体查询断点，阅读我们的 响应式网页设计教程。
