持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

媒体查询的介绍

由于媒体设备越来越多，因此媒体查询就出现了，通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

媒体查询的用法

媒体查询可以通过以下三类方法用于项目中

通过@media和@import at-rules用css装饰样式
用media=属性为<style>, <link>, <source>和其他HTML元素指定特殊的媒体类型
使用window.matchMedia()和mediaQueryList.addListenner()方法来测试和监控媒体状态。

下面介绍具体的语法组成部分

1. 定位媒体类型

这种主要是根据媒体的屏幕类型来区分，主要有以下几种媒体类型：

all: 适用于所有设备
print: 适用于在打印预览模式下在屏幕上查看的分页材料和文档
screen: 主要用于屏幕
speech: 主要用于语音合成器

@media print {}
@media screen, print {}

2. 定位媒体特性

媒体特性描述了user agent、输出设备，或是浏览器环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特征表达式都必须使用括号括起来。常用的媒体特性有以下几种：

width：视窗（viewport）的宽度
height：视窗（viewport）的高度
color：输出设备每个像素的比特值。常见的有8，16，32位
aspect-ratio: 视窗（viewport）的宽高比
device-width: 输出设备渲染表面（如屏幕）的宽度
device-height: 输出设备渲染表面（如屏幕）的高度

@media (max-width: 12450px) {}
@media speech and (aspect-ratio: 11/5) {}

3. 逻辑操作符

逻辑操作符not, and, 和only可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

and: 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
not: 用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。
only: 仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。
逗号: 逗号应用于将多个媒体查询合并为一个规则

@media (min-width: 30em) and (orientation: landscape) { ... }
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

// not是用来否定整体
@media not screen and (color), print and (color) { ... }
// 等价于
@media (not (screen and (color))), print and (color) { ... }

媒体查询的具体使用

1. 写在style样式表中

<style>
  .box {
    width: 200px;
    height: 200px;
  }
  @media screen and (min-device-width:200px) and (max-device-width:300px) {
    .box{
      color: gray;
    }
  }
</style>

2. 写在style标签中，有条件的执行某个内部样式表

<style media="screen and (min-device-width:200px) and (max-device-width:300px)">
  .box {
    width: 200px;
    height: 200px;
  }
</style>

3. 写在外部样式表中

<head>
	<link href="css/css1.css" rel="stylesheet" media="(min-device-width:200px) and (max-device-width:299px)">
</head>