css - 媒体查询在最小宽度 768px 以下不起作用

Question

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

@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>