媒体查询—CSS学习笔记

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

---

前言

媒体查询是响应式设计中常用的一种手段。它由一个媒体类型、一个媒体表达式、一组CSS规则组成，仅在浏览器和设备的环境与你指定的规则相匹配的时候你所写的 CSS 才会被应用。

基础的媒体查询

基本语法

@media [media-type] and ([media-feature-rule]) {
  /* [CSS rules] */
}

• [media-type]是媒体类型，告诉浏览器是应用于什么媒体类型（例如screen）
• [media-feature-rule]是下方所写[CSS rules]生效所需的规则或测试
• [CSS rules]是CSS规则，仅在上方规则都符合才被应用

媒体类型

• all
• print
• screen
• speech

@media screen {
    body {
        font-size: 16px;
    }
}

备注： 媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。

媒体规则特征

• 宽、高：我们最常设置的规则即为视口宽高，例如width、height、min-width、min-height，设置大于或小于某个视口宽高时，应用所写的CSS规则 例如：在宽度大于760px时，字体大小变为12像素

  @media screen and (width> 760px) {
      body {
          font-size:12px;
      }
  }
  

• 朝向：orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式

复杂的媒体查询

几个媒体查询可以混合起来采用相同的样式。

媒体查询中的“与”

可以采取and混合媒体类型和特征，但要and左右两个规则都匹配。例如，我们可能会想要min-width和orientation，在视口至少为 400 像素宽，并在设备横放时变为红色。

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: red;
    }
}

媒体查询中的“或”逻辑

如果要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。例如，在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色。

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

媒体查询中的“非”逻辑

如果想要反着逻辑来，例如横向变竖向。可以采用not

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}