媒体查询(Media Query)是用来针对不同类型、不同参数细节媒体设备定义样式的功能
一、语法格式
@media not|only 设备类型 [ and 设备特性 ]*
二、设备类型的取值
- all 所有的设备类型
- aural 语音和音频合成器
- braille 触觉反馈设备
- embossed 盲文印刷设备
- handheld 小型或手提设备
- print 打印机
- projection 投影图像(如幻灯片)
- screen 计算机显示器
- tty 固定间距字符格的设备(如电传打字机、终端)
- tv 电视设备
三、设备特性
语法格式中的[and 设备特性]*
表示可以出现0~N次,其中设备特性的取值为:
- width,匹配浏览器窗口的宽度,范围值可以用min-width、max-width
- height,匹配浏览器窗口的高度,范围值可以用min-height、max-height
- aspect-ratio,浏览器窗口的宽度值和高度值的比例,支持min/max前缀
- device-width,设备分辨率宽度值,支持min/max前缀
- device-height,设备分辨率高度值,支持min/max前缀
- device-aspect-ratio,设备分辨率宽高比,支持min/max前缀
- color,设备使用的色深位,如真彩色是32,非彩色设备的色深为0,支持min/max前缀
- color-index,色彩表中的颜色数,支持min/max前缀
- resolution,设备像素密度(如300dpi),支持min/max前缀
- scan,设备的扫描方式,只有两个取值:progressive(逐行扫描)和interlace(隔行扫描)
- grid,设备是否基于栅格,取值为:1(基于栅格)、0(基于其他方式)
四、实例开发
我们经常会看到一些网页的设计,同一版式在PC端和手机端都可以很好地显示,如:
可以称这种设计为响应式布局,而响应式布局的实现,是可以用媒体查询实现的,以下是实现响应式布局的一个简单DEMO:
<!DOCTYPE html>
<html>
<head>
<title>responsive layout</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">头部</div>
</header>
<section class="container">
<article>左边</article>
<aside>右边</aside>
</section>
</body>
</html>
css部分:
* { margin: 0px; padding: 0px }
@media screen and (min-width: 960px) {
.container { width: 960px; margin: auto; }
header { height: 100px; line-height: 100px; background: #36C; color: #FFF; text-align: center; }
section { display: flex; flex-direction: row }
section > article { width: 800px; height: 300px; background: #999 }
section > aside { width: 150px; height: 200px; background: #CCC; margin-left: 10px }
}
@media screen and (max-width: 960px) {
header { height: 100px; line-height: 100px; background: #36C; color: #FFF; text-align: center; }
section { display: flex; flex-direction: column; }
section > article { height: 200px; background: #999 }
section > aside { height: 200px; background: #CCC }
}
最终效果: