关于响应式布局的详解

1.定义
在不同的屏幕大小下显示的样式不同，往往我们会针对不同的屏幕大小设计两套及以上的样式
2.应用
移动端布局、后台管理系统
3.优缺点
优点:可以适应兼容多个设备
缺点:css代码量过多，影响浏览器的读取效率；开发过程中需要考虑的细节点比较多，加大了对于成本
的投入
4.语法

5. 设备名称
用来表示所需要检测的设备

6. 逻辑操作符
逻辑操作符包含 not、and 和 only 三个，and：表示两个条件同时成立；not：用于否定媒体查询，当
查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width:
500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算
符，则还必须指定媒体类型。
逻辑运算符包含not、and和only三个，其中and表示两个条件同时成立，not表示

7. 媒体特性
除了具体的类型外，还可以通过一些属性来描述设备的具体特征，例如宽度、高度、分辨率等，如下表
所示：

8.注意事项

a.在使用的过程中注意之间的空格，特别是逻辑运算符与设备特征小括号之间的空格，这个是容易忽略
的点
b.媒体查询的书写的内容一定放在需要覆盖的样式后面，否则无法被覆盖，或者说提高指定选择器的权
重