CSS @media 规则

示例

当浏览器窗口宽度为 600 像素或更小时，将 <body> 元素的背景颜色更改为 "lightblue"：

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个@media规则用于媒体查询中，为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查很多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式？）
解决

使用媒体查询是一种向台式机、笔记本电脑、平板电脑和手机提供定制样式表（响应式网页设计）的流行技术。

您还可以使用媒体查询来指定某些样式仅适用于打印文档或屏幕阅读器（媒体类型：打印、屏幕或语音）。

除了媒体类型之外，还有媒体特征。媒体功能通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更具体的细节。例如，您可以仅将样式应用于大于或小于特定宽度的屏幕。

浏览器支持

表中的数字指定第一个完全支持 @media 规则的浏览器版本。

Property
@media	21	9	3.5	4.0	9

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}

的含义不是,仅有的和和关键字：

不是：not 关键字反转整个媒体查询的含义。

仅有的：only 关键字可防止不支持具有媒体功能的媒体查询的旧版浏览器应用指定的样式。它对现代浏览器没有影响。

和：and 关键字将媒体特征与媒体类型或其他媒体特征组合起来。

它们都是可选的。但是，如果您使用不是或者仅有的，您还必须指定媒体类型。

你还可以有不同的样式表对于不同的媒体，像这样：

更多示例

示例

当浏览器宽度为 600px 或更小时隐藏元素：

@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

亲自试一试 »

示例

如果视口宽度为 800 像素或更宽，则使用 mediaqueries 将背景颜色设置为淡紫色；如果视口宽度在 400 到 799 像素之间，则将背景颜色设置为浅绿色。如果视口小于 400 像素，则背景颜色为浅蓝色：

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
body {
    background-color: lavender;
}
}

亲自试一试 »

示例

创建响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}

亲自试一试 »

示例

使用媒体查询创建响应式列布局：

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

亲自试一试 »

示例

使用媒体查询创建响应式网站：

亲自试一试 »

示例

媒体查询还可用于根据浏览器的方向更改页面布局。您可以拥有一组 CSS 属性，这些属性仅在浏览器窗口宽度大于其高度时应用，即所谓的 "Landscape" 方向。

如果方向处于横向模式，则使用浅蓝色背景颜色：

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

亲自试一试 »

示例

使用 mediaqueries 将文档在屏幕上显示时的文本颜色设置为绿色，在打印时将文本颜色设置为黑色：

@media screen {
body {
    color: green;
  }
}

@media print {
  body {
    color: black;
  }
}

亲自试一试 »

示例

逗号分隔列表：使用逗号将附加媒体查询添加到现有媒体查询中（这将类似于 OR 运算符）：

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <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 语法

更多示例

示例

示例

示例

示例

示例

示例

示例

示例

相关页面