前端必知必会-CSS媒体查询

---

CSS 媒体查询

CSS 媒体查询
CSS2 中引入的 @media 规则使得为不同媒体类型定义不同的样式规则成为可能。

CSS3 中的媒体查询扩展了 CSS2 媒体类型理念：它们不再查找设备类型，而是查看设备的功能。

媒体查询可用于检查许多内容，例如：

视口的宽度和高度
视口的方向（横向或纵向）
分辨率
使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机（如 iPhone 和 Android 手机）提供定制的样式表。

CSS 媒体类型

值	描述
all	用于所有媒体类型设备
print	用于打印预览模式
screen	用于计算机屏幕、平板电脑、智能手机等。

CSS 常用媒体功能

以下是一些常用的媒体功能：

值	描述
orientation	视口的方向。横向或纵向
max-height	视口的最大高度
min-height	视口的最小高度
height	视口的高度（包括滚动条）
max-width	视口的最大宽度
min-width	视口的最小宽度
width	视口的宽度（包括滚动条）

媒体查询语法

媒体查询由媒体类型组成，可以包含一个或多个媒体功能，这些功能解析为 true 或 false。

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

媒体类型是可选的（如果省略，它将被设置为 all）。但是，如果您使用 not 或 only，您还必须指定媒体类型。

如果指定的媒体类型与显示文档的设备类型匹配，并且媒体查询中的所有媒体功能都为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，遵循正常的级联规则。

not、only 和 and 关键字的含义：

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

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

and：此关键字结合了媒体类型和一个或多个媒体功能。

您还可以链接到针对不同媒体和不同宽度的浏览器窗口（视口）的不同样式表：

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">

等等…

媒体查询简单示例

使用媒体查询的一种方法是在样式表内添加一个备用 CSS 部分。

如果视口宽度为 480 像素或更宽，则以下示例将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色将为粉红色）：

示例

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

以下示例显示一个菜单，如果视口宽度为 480 像素或更宽，则菜单将浮动到页面左侧（如果视口小于 480 像素，则菜单将位于内容之上）：

示例

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}

---

总结

本文介绍了CSS媒体查询的使用，如有问题欢迎私信和评论