愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

CSS3媒体查询(Media Query)使用详解

媒体查询(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 }
}

最终效果: