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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

看起来你的查询是颠倒了一开始你应该从最宽到最短的自上而下。

媒体查询无法在最小宽度768px以下工作

2 个答案: