Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
当我们需要根据设备类型或者某些特殊的特性或参数(比如屏幕分辨率或者浏览器viewport宽度)来调整app的行为时，Media query的技术显得特别有用。
很多media特性都有一个特定的范围，因此可以用min-或者max-等前缀，来标注其最小或最大值。
Many media features are range features, which means they can be prefixed with “min-” or “max-” to express “minimum condition” or “maximum condition” constraints.
例如，下列CSS仅当浏览器的viewport宽度小于等于12450px时才生效：
For example, this CSS will apply styles only if your browser’s viewport width is equal to or narrower than 12450px:
@media (max-width: 12450px) { ... }
