一. 多媒体查询 @media
@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。
栗如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
<1> 语法
@media not|only mediatype and (expressions) {
}
- 先指明设备的类型
- 然后指明成立的条件（即设备需要满足怎样的条件才能显示指定的样式）
- 如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
<2> 几个常用的操作符
-
not: 用来排除掉特定的设备，比如 @media not print（非打印设备）。
-
only: 用 来规定某种特别的媒体类型。 表示只有 仅仅，表示某一种的媒体类型设备。
注意：对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
-
and: 表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式
<3> 常见多媒体类型
| all | 用于所有多媒体类型设备 |
|---|---|
| 打印机 | |
| screen | 电脑、平板、智能手机屏幕... |
| speech | 屏幕阅读器 |
<4> 常用的条件
-
max-width： 输出设备中页面最大可视区域宽度，小于这个width时，其中的css生效
-
min-width： 输出设备中页面最小可视区域宽度，大于这个width时，其中的css生效
-
max-height： 输出设备中页面最大可视区域高度
-
min-height： 输出设备中页面最小可视区域高度
<5> 栗子
(1) 当屏幕的可视窗口宽度大于480px且小于560px时改变背景色
body {
background-color: pink;
}
表示 匹配媒体类型为电脑屏幕等在宽度大于480px 并且小于560px时
@media screen and (min-width: 480px) and (max-width: 560px){
body {
background-color: lightgreen;
}
}
(2) 当屏幕的可视窗口宽度大于480px时将菜单浮动到左侧
@media screen and (min-width: 480px) {
#leftsidebar {
width:200px;
float:left;
}
#main {
margin-left:216px;
}
}
<6> 媒体查询的两种方式
(1) link 的方式
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="./css/green.css">
(2) css 样式
/*使用关键词"and"将多个媒体特性结合在一起*/
@media screen and (min-width:600px) and (max-width:900px){
body {
background-color:green;
}
}
<7> 使用 JS 操控 @media
(1) 查询 @media
在
JavaScript中，可以使用CSSMediaRuleCSS对象模型接口访问使用@media创建的规则。通过document.styleSheets[0].cssRules，可以访问到所有的 CSSrule！！！
(2) 创建 @media
在 JavaScript 中，可以使用 matchMedia() 方法创建媒体查询：
window.matchMedia(mediaQueryString);
mediaQueryString: 必需，一个被用于媒体查询解析的字符串。
该方法返回一个新的
MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。
返回的MediaQueryList 对象有以下属性：
- media ：查询语句的内容。
- matches ：用于检测查询结果，如果文档匹配
media query列表，值为true，否则为false。
举栗：
if (window.matchMedia("(max-width: 700px)").matches) {
/* 窗口小于或等于 700 像素 */
document.body.style.backgroundColor = "yellow";
} else {
/*窗口大于 700 像素 */
document.body.style.backgroundColor = "pink";
}
