媒体查询：
什么？这TMD超乎我想象啊！看着屏幕我陷入了沉思。为什么是大于的时候才会执行呢？
废话不多说，上正菜。
在做一个需求的时候遇到一个问题，大概意思是：当屏幕宽度大于某个值的时候，要为容器指定一个高度。
要求简单，也很容易理解，但是当我看到这段代码的时候还是陷（发）入（出）了沉（猪）思（叫）。
代码语言：javascript复制@media (min-width: 768px) {
#main_id > .carousel-inner > .item{
height: 410px;
}
}不知道小伙伴们看到这段代码的时候有没有理解这个逻辑，反正我当初是没有理解(流下了没有脑袋的泪水)…
下面来仔细分析一下这段代码：
代码语言：javascript复制1. 当最小宽度为768px 的时候，这个item元素的高度被设置为410px 。那么问题来了，什么时候这个条件成立呢？仅仅是宽度等于768px的时候才成立吗？
答案是 NO
这时候小伙伴们可能会问了：那它什么时候条件才成立呢？
重点：
下面我们来说一下这个**min-width：768px**作为条件的时候它的含义：
字面意思是：当最小宽度为768px的时候条件成立，但是它有一个隐藏含义，注意关键字最小，为什么是**最小宽度**呢？**最小宽度**意味着这个宽度不能再小了，也就等价于这个宽度必须大于等于768px，这个条件才成立，所以综上所述：当min-width: 768px作为判断条件的时候，它的成立条件是，宽度大于等于768px。
因此上面的逻辑就很好理解了。当然还有**max-width**其实思路都一样，有兴趣的可以去加深一下理解。
总结如下：
判断条件 | 含义 | 成立条件 |
|---|---|---|
max-width: 768px | 最大是768px，不能超过768px | 小于等于768px的时候成立 |
min-width: 768px | 最小是768px，必须超过768px | 大于等于768px的时候成立 |
拓展：
1. 当使用min-width作为判断条件时一定要从小到大排，原因时css脚本执行的时候是从上往下一行一行执行。
例如：
代码语言：javascript复制@media (min-width: 768px){
.container{
width:750px;
}
}
@media (min-width: 992px){
.container{
width:970px;
}
}
@media (min-width: 1200px){
.container{
width:1170px;
}
}2. 当使用max-width作为判断条件时一定要从大到小排，正好相反。
