媒体查询中的条件

媒体查询：

什么？这TMD超乎我想象啊！看着屏幕我陷入了沉思。为什么是大于的时候才会执行呢？

废话不多说，上正菜。

在做一个需求的时候遇到一个问题，大概意思是：当屏幕宽度大于某个值的时候，要为容器指定一个高度。

要求简单，也很容易理解，但是当我看到这段代码的时候还是陷（发）入（出）了沉（猪）思（叫）。

@media (min-width: 768px) {
	#main_id > .carousel-inner > .item{
			height: 410px;
	}
}

不知道小伙伴们看到这段代码的时候有没有理解这个逻辑，反正我当初是没有理解(流下了没有脑袋的泪水)…

下面来仔细分析一下这段代码：

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脚本执行的时候是从上往下一行一行执行。

例如：

@media (min-width: 768px){
	.container{
		width:750px;
	}
}

@media (min-width: 992px){
	.container{
		width:970px;
	}
}

@media (min-width: 1200px){
	.container{
		width:1170px;
	}
}

2. 当使用max-width作为判断条件时一定要从大到小排，正好相反。