CSS-媒体查询详解

1. 媒体查询三种使用方法

需求：屏幕宽度小于800px，背景为orange

• @import

  /* @import是可以和媒体查询结合来使用 */
  @import url(./css/body_bgc.css) (max-width: 800px);
  

• link

  <link rel="stylesheet" media="(max-width: 800px)" href="./css/body_bgc.css">
  

• @media

  @media (max-width: 800px) {
    body {
      background-color: orange;
    }
  }
  

2. 媒体查询的概念

• 媒体类型

  • 使用媒体查询时，你必须指定要使用的媒体类型。

  • 媒体类型是可选的，并且会（隐式地）应用 all 类型。

• 常见的媒体类型值如下：

  • all：适用于所有设备

  • print：适用于在打印预览模式下在屏幕上查看的分页材料和文档

  • screen（掌握）：主要用于屏幕

  • speech：主要用于语音合成器

• 媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征

  • 通常会将媒体特性描述为一个表达式

  • 每条媒体特性表达式都必须用括号括起来

  

• 逻辑操作符(operators)

  • 媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

    • 如果结果为真（true），那么就会生效

    • 如果结果为假（false），那么就不会生效

  • 如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

    • and：and 操作符用于将多个媒体查询规则组合成单条媒体查询

    /* 宽度大于500px小于800px时生效 */
    @media (min-width: 500px) and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }
    

    • not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

    • only：only运算符仅在整个查询匹配时才用于应用样式。

    • , (逗号)：逗号用于将多个媒体查询合并为一个规则。

  • 屏幕尺寸适配

  <style>
  /* 
    320~375之间 font-size: 15px;
    375~414之间 font-size: 18px;
    414~480之间 font-size: 21px;
    大于480px font-size: 24px
  */
  /* @media (min-width: 320px) and (max-width: 375px) {
    .box { font-size: 15px; }
  }
  @media (min-width: 375px) and (max-width: 414px) {
    .box { font-size: 18px; }
  }
  @media (min-width: 414px) and (max-width: 480px) {
    .box { font-size: 21px; }
  }
  @media (min-width: 480px) {
    .box { font-size: 24px; }
  } */
  
  /* CSS层叠性 */
  @media (min-width: 320px) {
    .box { font-size: 15px; }
  }
  @media (min-width: 375px) {
    .box { font-size: 18px; }
  }
  @media (min-width: 414px) {
    .box { font-size: 21px; }
  }
  @media (min-width: 480px) {
    .box { font-size: 24px; }
  }
  
  </style>