CSS 媒体查询
CSS 媒体查询
CSS2 中引入的 @media 规则使得为不同媒体类型定义不同的样式规则成为可能。
CSS3 中的媒体查询扩展了 CSS2 媒体类型理念:它们不再查找设备类型,而是查看设备的功能。
媒体查询可用于检查许多内容,例如:
视口的宽度和高度
视口的方向(横向或纵向)
分辨率
使用媒体查询是一种流行的技术,用于向台式机、笔记本电脑、平板电脑和手机(如 iPhone 和 Android 手机)提供定制的样式表。
CSS 媒体类型
值 | 描述 |
---|---|
all | 用于所有媒体类型设备 |
用于打印预览模式 | |
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媒体查询的使用,如有问题欢迎私信和评论