CSS3 Media Queries 学习笔记

CSS2 引入 媒体类型 Media Types

CSS2 引入了 @media 规则，目的是给不同的 媒体类型 media types 定义不同的 样式规则 style rules。
不过 Media Types 并没有被设备支持。

CSS3 引入 媒体类型 Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media Queries 扩展了 media types，所不同的是，它查询设备的兼容性，而不是设备的类型。

Media queries 可以用来查询：

• viewport 的宽度和高度
• device 的宽度和高度
• 排列方向（横排或竖排）
• 分辨率
• 更多特性请查看 CSS3 @media Rule 中的 Media Features

Media Query 语法

如下的代码中，当 mediatype 匹配当前设备并且所有的表达式 expressions 都为 true 时，该 Media Query 返回 true，并且大括号中的 CSS-Code 会对当前页面生效。
其中，mediatype 可以为空，为空时，表示匹配任何的设备。

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

对于 mediatype，可以有如下的选项：

• all：所有的设备
• print：打印机
• screen：屏幕，包括电脑，平板，手机
• speech：screenreaders 朗读器

具体的使用示例如下：
默认的背景色为 pink，当屏幕宽度大于 480px 时，背景色设为 lightgreen。

body {
    background-color: pink;
}

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

我们也可以根据 Media Queries 加载不同的 CSS 文件，语法如下：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

具体的使用示例如下：
当屏幕宽度小于 400px 时候，加载 tinyScreen.css。
当屏幕宽度在 400px 到 600px 之间时，加载 smallScreen.css。

<link rel="stylesheet" type="text/css"　　　　media="screen and (max-device-width: 400px)"　　　　href="tinyScreen.css" />

<link rel="stylesheet" type="text/css"　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"　　　　href="smallScreen.css" />

---

引用：
CSS3 Media Queries