一、基本概念
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
使用媒体查询是一种流行的技术,可以向台式机、笔记本电脑、平板电脑和手机(例如 iPhone 和 Android 手机)提供定制的样式表。
- 媒体查询可用于检测很多事情:
1. viewport(视窗) 的宽度与高度
2. 设备的宽度与高度
3. 朝向 (智能手机横屏,竖屏) 。
4. 分辨率
- 浏览器兼容性
二、基本用法
- 如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。
@media not|only mediatype and (expressions) {
CSS 代码...;
}
值 | 作用 | 描述 |
---|---|---|
all | 默认值,所有设备 | 不指定就相当于默认all |
not | 用来排除掉某些特定的设备的 | 比如 @media not print(非打印设备) |
only | 用来定某种特别的媒体类型 | 对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。 对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。 |
多媒体类型:
属性 | 说明 |
---|---|
all | 用于所有多媒体类型设备 |
用于打印机 | |
screen | 用于电脑屏幕,平板,智能手机等。 |
speech | 用于屏幕阅读器 |
- 示例:在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色(如果视口小于 480 像素,则背景颜色会是粉色)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一颗不甘坠落的流星</title>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
</body>
</html>
- 扩展:
webkit-overflow-scrolling
属性:控制元素在移动设备上是否使用滚动回弹效果
属性 | 描述 |
---|---|
auto | 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止 |
touch | 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。 继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文 |
三、其他案例
- 想实现的效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一颗不甘坠落的流星</title>
<style>
* {
box-sizing: border-box;
}
/* 设置顶部导航栏样式 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 悬停时改变颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 在宽度为 600 像素或更小的屏幕上,使菜单链接彼此堆叠,而不是并排 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h1>响应式导航菜单</h1>
<p>请调整浏览器窗口的大小以查看效果:当屏幕小于 600 像素时,导航菜单将垂直显示,而不是水平显示。</p>
<div class="topnav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
</body>
<script type="text/javascript"></script>
</html>