媒体查询在最小宽度 768 像素以下不起作用

Question

我设置了一些媒体查询，但有些有效，有些无效。我真的不知道出了什么问题，因为我在另一个项目中使用了相同的媒体查询代码并且照常工作。它适用于 768px 及以上，但不适用于较小的屏幕。我正在使用引导程序和角度。

@media only screen and (min-width : 320px) and (max-width : 480px) {
   .accordion-ticket {
        margin-left: 10px;
    }
}
@media (min-width: 481px){
    .accordion-ticket {
        margin-left: 10px;
    }
}
@media (min-width: 768px) {
   .accordion-ticket {
        margin-left: 10px;
    }
}

我错过了什么吗？元标记是：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 1

顺便说一句，您在中间媒体查询中遗漏了 max-width 语句，但问题所在并不完全清楚。

JSfiddle Demo

.accordion-ticket {
  height: 25px;
  background: red;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .accordion-ticket {
    background: blue;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .accordion-ticket {
    background: green;
  }
}
@media (min-width: 768px) {
  .accordion-ticket {
    background: orange;
  }
}

<div class="accordion-ticket"></div>

Answer 2

看起来您的查询一开始就颠倒了，您应该从上到下从最宽到最短。