# 媒体查询

1、媒体查询基础语法
- 1.1 媒体类型
- 1.2 媒体特征规则
2、较复杂的媒体查询
3、移动优先的响应式设计
4、是否真的需要媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，

# 1、媒体查询基础语法

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分组成：

一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

# 1.1 媒体类型

媒体类型有以下这些

all
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备

还有其他的一些已经废弃了，常用的应该就是screen了。

举一个例子

@media pring {
	body {
		font-size: 14px;
	}
}
/*开启打印模式的时候， body的字体会被设置为14px*/

# 1.2 媒体特征规则

在指定了媒体类型之后，可以使用多条规则执行媒体的特征。

# 1.2.1 宽和高

为了做一些响应式的网站，我们最常使用的特征就是视口的宽度，而且可以使用max-width、min-width、width等特征。在视口宽度大于小于或者等于某个值的时候，应用特定的css。一般刚好等于的情况可能应用的比较少。

TIP

min-,max-用于表示所给的值是最小值还是最大值。

比如下面的例子

/*当最大宽度是400px， 也就是视口小于400px，应用对应的css*/
@media screen and (max-width: 400px) {
  body {
    color: red;
  }
}

/*最小宽度是400， 最大宽度是800， 也就是说视口介于400-800之间*/
@media screen and (min-width: 400px) and (max-width: 800px) {
  body {
    color: red;
  }
}

# 1.2.2朝向

一个受到良好支持的媒体特征是orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。

/*landscape表示横屏时会应用的css*/
@media (orientation: landscape) {
  body {
    color: rebeccapurple;
  }
}

# 1.2.3 使用指点设备

作为四级规范的一部分，hover媒体特征被引入了进来。这种特征意味着你可以测试用户是否能在一个元素上悬浮，这也基本就是说他们正在使用某种指点设备，因为触摸屏和键盘导航是没法实现悬浮的。

/*只有使用鼠标的才可以触发hover， 所以下面的css在移动端可能就无效了*/
@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

# 2、较复杂的媒体查询

# 2.1 与逻辑

可以用and混合媒体类型和多个媒体特征，比如下面的例子

/* 只有在宽度大于500px。 并且是横屏的时候才应用css */
@media screen and (min-width: 500px) and (orientation: landscape) {
  body {
    color: red;
  }
}

# 2.2 或逻辑

使用都好分隔可以达到或的效果

/* 宽度大于400或者是横屏的时候应用css */	
@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

# 2.3 非逻辑

可以用not操作符让整个媒体查询失效。

/* 文本只会在朝向为竖着的时候变成蓝色 */
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

# 3、移动优先的响应式设计

从最小的视图开始，随着视口变得越来越大，增添布局内容。这种方式叫做移动优先的响应式设计，很多时候是比较值得效仿的做法。

一个简单的demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        width: 90%;
        margin: 2em auto;
        font: 1em/1.3 Arial, Helvetica, sans-serif;
      }

      a:link,
      a:visited {
        color: #333;
      }

      nav ul,
      aside ul {
        list-style: none;
        padding: 0;
      }

      nav a:link,
      nav a:visited {
        background-color: rgba(207, 232, 220, 0.2);
        border: 2px solid rgb(79, 185, 227);
        text-decoration: none;
        display: block;
        padding: 10px;
        color: #333;
        font-weight: bold;
      }

      nav a:hover {
        background-color: rgba(207, 232, 220, 0.7);
      }

      .related {
        background-color: rgba(79, 185, 227, 0.3);
        border: 1px solid rgb(79, 185, 227);
        padding: 10px;
      }

      .sidebar {
        background-color: rgba(207, 232, 220, 0.5);
        padding: 10px;
      }

      article {
        margin-bottom: 1em;
      }
    </style>
    <style>
      /* 当宽度大于40em时， 让main变成横向布局*/
      @media screen and (min-width: 40em) {
        article {
          display: grid;
          grid-template-columns: 3fr 1fr;
          column-gap: 20px;
        }

        nav ul {
          display: flex;
        }

        nav li {
          flex: 1;
        }
      }
      /* 当宽度大于70em时， 让导航和 article 变成横向布局*/
      @media screen and (min-width: 70em) {
        main {
          display: grid;
          grid-template-columns: 3fr 1fr;
          column-gap: 20px;
        }

        article {
          margin-bottom: 0;
        }

        footer {
          border-top: 1px solid #ccc;
          margin-top: 2em;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <nav>
          <ul>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Meet the team</a></li>
            <li><a href="">Blog</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <article>
          <div class="content">
            <h1>Veggies!</h1>
            <p>...</p>
          </div>
          <aside class="related">
            <p>...</p>
          </aside>
        </article>

        <aside class="sidebar">
          <h2>External vegetable-based links</h2>
          <ul>
            <li>...</li>
          </ul>
        </aside>
      </main>

      <footer><p>&copy;2019</p></footer>
    </div>
  </body>
</html>

# 4、是否真的需要媒体查询

很多时候我们可以使用网格布局，弹性盒子布局，百分比来实现可伸缩响应式布局，而且不需要媒体查询。

参考文章媒体查询入门指南 (opens new window)

← 网格布局Grid animation-动画 →