CSS 媒体查询 - 示例
CSS 媒体查询 - 更多示例
让我们看一些使用媒体查询的例子。
媒体查询是一种流行的技术，用于向不同设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色：
例子
/* 将主体的背景颜色设置为棕褐色 */
身体 {
背景颜色：棕褐色；
}
/* 在 992px 或更小的屏幕上，将背景颜色设置为蓝色 */
@media 屏幕和（最大宽度：992px）{
身体 {
背景颜色：蓝色；
}
}
/* 在 600px 或更小的屏幕上，将背景颜色设置为橄榄色 */
@media 屏幕和（最大宽度：600px）{
身体 {
背景颜色：橄榄色；
}
}
亲自尝试 »
您是否想知道我们为什么使用 992px 和 600px？这就是我们所说的设备的“典型断点”。您可以在我们的 响应式网页设计教程.
菜单的媒体查询
在这个例子中，我们使用媒体查询来创建一个响应式导航菜单，其设计在不同的屏幕尺寸上有所不同。
大屏幕：
小屏幕：
例子
/* 导航栏容器 */
.顶部导航 {
溢出：隐藏；
背景颜色：#333；
}
/* 导航栏链接 */
.topnav a {
向左飘浮;
显示：块；
白颜色;
文本对齐：居中；
填充：14px 16px；
文字修饰：无；
}
/* 在宽度为 600px 或更小的屏幕上，使菜单链接堆叠在一起而不是彼此相邻 */
@media 屏幕和（最大宽度：600px）{
.topnav a {
浮动：无；
宽度：100％；
}
}
亲自尝试 »
列的媒体查询
媒体查询的一个常见用途是创建灵活的布局。在此示例中，我们根据不同的屏幕尺寸创建了在四列、两列和全宽列之间变化的布局：
大屏幕：
中等屏幕：
小屏幕：
例子
/* 创建四个相等且彼此相邻的列 */
。柱子 {
向左飘浮;
宽度：25%；
}
/* 在宽度为 992px 或更小的屏幕上，从四列变为两列 */
@media 屏幕和（最大宽度：992px）{
。柱子 {
宽度：50%；
}
}
/* 在宽度为 600px 或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@media 屏幕和（最大宽度：600px）{
。柱子 {
宽度：100％；
}
}
亲自尝试 »
提示： 创建列布局的更现代方法是使用 CSS Flexbox（见下面的示例）。但是，Internet Explorer 10 及更早版本不支持它。如果您需要 IE6-10 支持，请使用浮动（如上所示）。
要了解有关弹性框布局模块的更多信息， 阅读我们的 CSS Flexbox 章节.
要了解有关响应式网页设计的更多信息， 阅读我们的响应式网页设计教程.
例子
/* 弹性盒子的容器 */
。排 {
显示：弹性；
弹性包裹：包裹；
}
/* 创建四个相等的列 */
。柱子 {
弯曲：25%；
填充：20px；
}
/* 在宽度为 992px 或更小的屏幕上，从四列变为两列 */
@media 屏幕和（最大宽度：992px）{
。柱子 {
弯曲：50%；
}
}
/* 在宽度为 600px 或更小的屏幕上，使列堆叠在一起而不是彼此相邻 */
@media 屏幕和（最大宽度：600px）{
。排 {
弹性方向： 列；
}
}
亲自尝试 »
使用媒体查询隐藏元素
媒体查询的另一个常见用途是隐藏不同屏幕尺寸上的元素：
使用媒体查询更改字体大小
您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：
可变的字体大小。
例子
/* 如果屏幕尺寸大于 600px 宽，则设置字体大小<div>至 80px */
@media 屏幕和（最小宽度：600px）{
div.示例 {
字体大小：80px；
}
}
/* 如果屏幕尺寸为 600px 宽或更小，则设置字体大小<div>到 30px */
@media 屏幕和（最大宽度：600px）{
div.示例 {
字体大小：30px；
}
}
亲自尝试 »
灵活的图片库
在此示例中，我们结合使用媒体查询和 flexbox 来创建响应式图像库：
例子
亲自尝试 »灵活的网站
在这个例子中，我们将媒体查询与 flexbox 结合使用来创建一个响应式网站，其中包含灵活的导航栏和灵活的内容。
例子
亲自尝试 »方向：纵向 / 横向
媒体查询还可用于根据浏览器的方向改变页面的布局。
您可以拥有一组仅在浏览器窗口的宽度大于其高度时才适用的 CSS 属性，即所谓的“横向”方向：
最小宽度至最大宽度
您还可以使用 (max-width: ..) and (min-width: ..) 值来设置最小宽度和最大宽度。
例如，当浏览器的宽度在 600 到 900px 之间时，更改<div>元素：
使用附加值： 在下面的例子中，我们使用逗号在现有的媒体查询中添加一个额外的媒体查询（这将类似于 OR 运算符）：
例子
/* 当宽度在 600px 到 900px 之间时 或者 1100px 以上 - 改变外观<div> */
@media 屏幕和（最大宽度：900px）和（最小宽度：600px），（最小宽度：1100px）{
div.示例 {
字体大小：50px；
填充：50px；
边框：8px 实心黑色；
背景：黄色；
}
}
亲自尝试 »
CSS @media 参考
如需全面了解所有媒体类型和功能/表达方式，请参阅 我们的 CSS 参考中的 @media 规则.
提示： 要了解有关响应式网页设计（如何针对不同的设备和屏幕）、使用媒体查询断点的更多信息，请阅读我们的响应式网页设计教程.
