css 媒体查询始终默认为 css 文档中的最后一个查询

Question

我正在尝试将一些基本的 css media queries 实现到我的网络应用程序中。无论我如何对 CSS 文档中的查询进行排序，它都将始终使用最后一个查询。

我的CSS布局出来了

basic styles{
   ...
}
@mediaqueries{
   styles{
      ...
   }
}

我不知道这是否是一个排序问题，但无论我将浏览器或测试设备做得有多大，它始终是文档中的最后一个查询。

媒体查询：

Regular CSS{
   ...
}
@media screen  and (orientation : landscape) {
   //changes background image for devices
}
@media screen and (orientation : portrait) {
   //changes background image for devices
}
@media screen and (min-device-width: 240px) and (max-device-width: 320px) {
   ...
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
   ...
}
@media screen and (min-device-width: 480px) and (max-device-width: 640px) {
   ...
}
@media screen and (min-device-width: 640px) and (max-device-width: 800px) {
   ...
}

And So on

元标记

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

Things I have tried

@media only screen and (min-device-width: 640px) and (max-device-width: 800px)

而不是

@media screen and (min-device-width: 640px) and (max-device-width: 800px)

和

@media all and (min-device-width: 640px) and (max-device-width: 800px)

而不是

@media screen and (min-device-width: 640px) and (max-device-width: 800px)

有什么想法吗？我的 css 是 1026 行，所以无法粘贴整个文档抱歉

Answer 1

排序媒体查询时，您应该确保 max-width 属性从最高值开始下降，因此它应该与您提供的代码正好相反。

我通常倾向于处理媒体查询的方式如下：

@media (min-height: 992px)
{
   *css here*
}
@media (max-width: 991px)
{
   *css here*
}
@media (max-width: 768px)
{
   *css here*
}
@media (max-width: 499px)
{
   *css here*
}

不要误会我的意思，您可以将最小值和最大值结合起来，这是完全正确的。

css 媒体查询始终默认为 css 文档中的最后一个查询

css media queries always defaults to the last query in the css document

html

css

media-queries