@media 查询条件判断的顺序
如果判断最小值，即使用(min-width)，应该从小到大写；也是推荐的写法，因为一些前端框架（如：bootstrap）就是判断最小值，从小往大写的；
- 向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内；
- 向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖；
代码：
<style>
body {
background-color: #f00;
}
@media screen and (min-width: 768px) {
body {
background-color: #0f0;
}
}
@media screen and (min-width:992px) {
body {
background-color: #00f;
}
}
@media screen and (min-width:1200px) {
body {
background-color: #0ff;
}
}
</style>
如果判断最大值，即使用(max-width)，应该小大到小写；
<style>
body {
background-color: #f00;
}
@media screen and (max-width:1200px) {
body {
background-color: #0ff;
}
}
@media screen and (max-width:992px) {
body {
background-color: #00f;
}
}
@media screen and (max-width: 768px) {
body {
background-color: #0f0;
}
}
</style>
@media 媒体查询判断条件，引入不同的css文件
比如：当屏幕宽度在 992PX与1200PX 之间时，引入 newMedia.css 样式表；
代码：
<link rel="stylesheet" media = "screen and (min-width:992px) and (max-width:1200px)" href = "newMedia.css">
@media 媒体查询中的 min-width 和 min-device-width 的区别
min-width: 在PC端和移动端都能正常响应，效果一致；它是指当前可视区域的宽度；
<style>
body {
background-color: #f00;
}
@media screen and (min-width: 768px) {
body {
background-color: #0f0;
}
}
@media screen and (min-width:992px) {
body {
background-color: #00f;
}
}
</style>
效果如图，开不开启手机模拟，效果都一样：
image.png
min-device-width: 在移动端和期望值一样。 device:设备；它是指当前设备的宽度。当拖出改变浏览器大小的时候，当前终端设备的宽度并不会变化，意味着媒体查询条件不会响应；
代码：
<style>
body {
background-color: #f00;
}
@media screen and (min-device-width: 768px) {
body {
background-color: #0f0;
}
}
@media screen and (min-device-width:992px) {
body {
background-color: #00f;
}
}
</style>
如果使用 min-device-width ， 那么在不开启手机模拟时，就没有效果了。
image.png
