媒体查询
1. 什么是媒体查询
媒体查询可以根据当前显示设备的特性(如： 视口宽度, 屏幕比例，设备显示方向)为其添加css样式， 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。
2. 使用方式
2.1.@media方法(写在css里).
3.媒体类型
将不同的终端设备划分为不同的类型, 称为媒体类型
4. 媒体特性
每个媒体类型都具有各自的媒体特性, 根据不同的媒体类型的媒体特性设置不同的展示风格
常用特性
width / height：完全等于layout viewport (布局视口)
max-width / max-height：大于layout viewport
min-width / min-height：小于layout viewport
device-width / device-height：完全等于 ideal viewport (理想视口)
5. 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
1. and 可以将多个媒体特性连接到一起, 相当于"且"的意思.
2. not 排除某个媒体特性, 相对于"非"的意思, 可以省略
3. only 指定某个特定的媒体类型, 可以省略.
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
/* 粉色 */
background: pink;
}
/* screen: 查询类型为电脑或者手机 */
@media screen and (min-width: 480px) {
body {
/* 天蓝色 */
background: skyblue;
}
}
@media screen and (min-width: 768px) {
body {
/* 黄色 */
background: #FBE251;
}
}
@media screen and (min-width: 992px) {
body {
/* 红色 */
background: #E83015;
}
}
@media screen and (min-width: 1200px) {
body {
/* 绿色 */
background: #1B813E;
}
}
</style>
</head>
<body>
</body>
</html>
以上的媒体查询意思是：
当屏幕视口大于1200px的时候显示绿色，在1200px与992px之间的时候显示红色，在992px与768px之间的时候显示黄色，在768px与480px之间的时候显示天然色，当所有条件都不满足的时候显示粉色。
细节：
写媒体查询的时候要注意书写顺序（判断最小值要从小到大，判断最大值就要从大到小)，一般使用了min-width就全部时候min-width，使用了max-width就全部时候max-width。
向上兼容：在窄屏设置的样式，默认在宽屏也会存在。
向下覆盖：宽屏设置的样式，会覆盖窄屏设置的样式。
上一篇： 获取数据库用户表的数据
下一篇： 用三台虚拟机搭建Hadoop全分布集群