媒体查询语法与尺寸特征

媒体查询由哪些部分组成？

• @media: 声明一条媒体查询;
• media-type: 目标设备类型;
• media-feature-rule: 特征条件;
• css rule: 命中后应用的规则块;

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

media type 有哪些取值？

• all: 所有设备;
• print: 打印;
• screen: 屏幕;

width/height 相关特征如何匹配？

• (width: 600px): 视口宽正好等于 600px 时命中;
• (min-width: 600px): 宽度大于等于时命中;
• (max-width: 600px): 宽度小于等于时命中;
• height 同理;

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

逻辑运算符如何组合条件？

• and: 同时满足多个条件;
• ,: 逗号表示 or, 任一条件满足即命中;
• not: 取反;

/* or */
@media screen and (min-width: 600px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}
/* not */
@media (not all) and (orientation: landscape) {
  body {
    color: blue;
  }
}