最大的媒体查询（最小宽度：1020px）一直覆盖最小媒体查询的（最大宽度：599px）弯曲方向的值

我在这4周阶媒体的质疑在我的CSS：最大的媒体查询（最小宽度：1020px）一直覆盖最小媒体查询的（最大宽度：599px）弯曲方向的值

@media screen and (max-width: 599px) 
@media screen and (min-width:600px) and (max-width: 895px) 
@media screen and (min-width: 896px) and (max-width: 1019px) 
@media screen and (min-width: 1020px)

他们的工作大多数情况下，除了当我尝试改变弯曲方向时。我有这个类以上媒体查询：

.home-mod4-founders { 
display:flex; 
align-items:stretch; 
}

而这个最小的媒体查询下：

@media screen and (max-width: 599px) { 
.home-mod4-founders { 
    flex-direction:column; 
} 
}

出于某种原因，当屏幕599px下，它需要对一个价值其他3个疑问：

.home-mod4-founders { 
flex-direction:row; 
}

当我检查了页面，Chrome的开发工具，它似乎去掉一个最大的媒体查询部分，使其覆盖599px媒体查询： screenshot 活动网站是在这里：www.whisperlodge.nyc

我复制粘贴的CSS和HTML成codepen http://codepen.io/chillinkwa/pen/MJZVEj

来源

2017-02-13 chillinkwa

当您更改'flex-direction'时，'align-items：stretch'不再适用于横轴。相反，它适用于'flex-direction：column'的主轴。如果不全面查看代码，尽管如此，很难说出什么问题。 –

好吧刚刚签署了Codepen并坚持我的笔CSS和HTML： http://codepen.io/chillinkwa/pen/MJZVEj 如果有什么事情在笔看起来关闭，这可能是因为它是wordpress.com具体。现场也在www.whisperlodge.nyc – chillinkwa

我设法从大媒体查询删除类来解决问题。由于在下面的规范中存在相同的规范，它们似乎仍然适用于较大的浏览器宽度。

来源

2017-02-13 05:53:05 chillinkwa

http://stackoverflow.com/questions/43999830/using-multiple-css-media-queries-but-its-only-using-the-largest-one/43999854# 43999854 – snkv

最大的媒体查询（最小宽度：1020px）一直覆盖最小媒体查询的（最大宽度：599px）弯曲方向的值

回答

相关问题