CSS3 媒体查询实例
CSS3 媒体查询 - 更多实例
让我们看看使用媒体查询的更多例子。
媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。
下面演示一个简单的例子，让我们来更改不同设备的背景色:
实例
/* 设置 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;
}
}
亲自试一试 »
您想知道我们为什么要精确使用 992px 和 600px 吗?它们就是我们所称的设备的"典型断点"（typical breakpoints）。您可以在我们的 响应式 Web 设计教程 中学习有关典型断点的更多知识。
菜单的媒体查询
在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。
大型屏幕:
Home Link 1 Link 2 Link 3小型屏幕:
Home Link 1 Link 2 Link 3实例
/* 导航栏容器 */.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%;
}
}
/* 在 600px 宽或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@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;
}
/* 在 992 像素或以下宽的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 在 600px 宽或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
亲自试一试 »
用媒体查询隐藏元素
媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素:
在小屏幕上我会隐藏。实例
/* If the screen size is 600px wide or less, hide the element */@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 或更小，则设置 的 font-size 到 30 像素 */
@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 和 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;
}
}
亲自试一试 »
使用附加值:在下面的例子中，我们使用逗号（类似 OR 运算符）将附加的媒体查询添加到已有媒体查询中:
实例
/* 当宽度在 600px 和 900px 之间 OR 超过 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;
}
}
亲自试一试 »
CSS3 @media 参考手册
有关所有媒体类型和特性/表达式的完整概述，请查看 CSS 参考中的 @media 规则。
提示: 如需学习有关响应式 Web 设计（如何针对不同的设备和屏幕）的更多知识，以及使用媒体查询断点，请阅读我们的 响应式 Web 设计教程。
颜色选择器
CSS 参考手册
CSS 实例
CSS 测验/考试
读后有收获微信请站长喝咖啡
