媒体查询基础

格式

/** 与 */
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
/** 或 */
@media screen and (min-width: 400px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

• 一个媒体类型，告诉浏览器这段代码使用咋什么类型的媒体上的。
• 一个媒体表达式，是一个被包含的 css 生效所需的规则或者测试。
• 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

媒体类型：

• all 所有
• print 打印
• screen 屏幕
• speech 语音

示例：

@media print {
  body {
    font-size: 12pt;
  }
}

宽高

@media screen and (width: 600px) {
  body {
    color: red;
  }
}

一般不会使用width和height，而是使用min-width和max-width。

@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    color: red;
  }
}

朝向：

• orientation:portrait 竖屏
• orientation:landscape 横屏

@media (orientation: landscape) {
  body {
    color: rebeccapurple;
  }
}

使用指点设备：

hover媒体特征，这种特征意味着你可以测试用户能否在一个元素上悬浮。因为触摸屏和键盘导航是没法实现悬浮的。

@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

你是否真的需要媒体查询？

在现代浏览器中，布局已经不是原来单一的px了，而是使用em、rem、vw、vh等相对单位，这些单位可以自动适应屏幕大小，所以媒体查询已经不那么重要了。而且在flexbox和grid布局出现之后，媒体查询的使用场景也大大减少了。