媒体查询

媒体查询的目的是为了做响应式，使网站能够适应不同的设备（浏览器等）

1. 写媒体查询时应注意次序，避免被后续写的样式覆盖，尽量将媒体查询的样式写在后面
2. 媒体查询的写法一般由两种

(1) <link...>元素中的媒体查询：
<link rel="stylesheet" media="(max-width: 800px)" href="example.css"/>
(2) <style>样式表中的媒体查询：
<style>
@media (max-width: 800px) {
p {
color: red;
}
</style>

3. 逻辑操作符（css3）
   （1） not 对媒体查询结果进行取反，not 是最后进行运算的逻辑运算符，但其优先级高于“，”

@media not all and (monochrome) { ... }等价于
@media not (all and (monochrome)) { ... }
only 作符仅在媒体查询匹配成功的情况下被用于应用一个样式
（2） only 操作符仅在媒体查询匹配成功的情况下被用于应用一个样式
（3） and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型
如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：
@media (min-width: 700px) and (orientation: landscape) { ... }
如果仅想在电视媒体上应用，可以使用 and 操作符合并媒体属性：
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
（4） 逗号分隔效果等同于or逻辑操作符
例如，如果想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

4. 手机端，要求不对页面进行缩放：

<meta name='viewport' content='width=device-width;user-scalable=no;initial-scale=1.0;maxium-scale=1.0;minium-scale=1.0">

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries