Media queries

为什麽需要 Media Queries

Media queries 可以让我们依据不同装置的特性来调整网页应用程序。

什麽是 Media Queries？

Media Queries 的组成

@media [Media Type] ([Media Feature]) [Operators] ([Media Feature])
ex: @media screen (min-width: 320px) and (max-width: 768px)

@media 是 CSS 的其中一种 At-Rule，At-Rule 指令的用途是声明 CSS 该如何呈现样式，如果满足媒体查询的条件就会生效。

@media (RULE)

Media Type 目标的媒体类型，多数情况下会直接使用 screen

Media Feature 匹配的规则

Operators Media 支援逻辑运算子

• and
• or (comma-separated)
• not

Use Case

Mobile First

html { 
  background: red;
}

@media (min-width: 600px) {
  html { 
    background: green;
  }
}

@media (min-width: 800px) {
  html { 
    background: blue;
  }
}

Device's Orientation

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

参考资料

CSS Syntax
The At-Rules of CSS
A Complete Guide to CSS Media Queries
Media Queries Level 4