css 媒体查询不适用于某些分辨率

Question

我正在使用 css 媒体断点来优化不同设备的字体等。除了我的两个断点外，一切正常，但方式很奇怪。

我正在使用 Google Chrome 开发人员控制台来测试所有这些。 @media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) 适用于 1440px x 900px 的设备，因此宽度为 1440。

但是，媒体查询只有在我将其设置为 @media screen only and (min-device-width: 900px) and (max-device-width: 1919px) 时才会起作用，这对我来说没有任何意义。

@media only screen and (min-device-width: 320px) and (max-device-width: 500px) {
  /* Works */
}
@media only screen and (min-device-width: 960px) and (max-device-width: 1023px) {
  /* Works */
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1279px) {
  /* Works */
}
@media only screen and (min-device-width: 1360px) and (max-device-width: 1439px) {
  /* Works */
}
@media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) {
  /* Doesn't Work */
}
@media only screen and (min-device-width: 1920px) and (max-device-width: 2499px) {
  /* Works */
}
@media only screen and (min-device-width: 2500px) and (max-device-width: 3839px) {
  /* Works */
}

Answer 1

试试这个：http://codepen.io/anon/pen/rVKLOM

我更改了一些值。宽度有差距。

.test {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  background-color: #e41;
  color: #fff;
  font-family: Helvetica;
  box-sizing: border-box;
  padding: 50px;
  width: 400px;
}



  @media only screen and (min-width: 320px) and (max-width: 959px) {
  .test::before { content: '320px - 959px'; }
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
  .test::before { content: '960px - 1023px'; }
}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
  .test::before { content: '1024px - 1359px'; }
}
@media only screen and (min-width: 1360px) and (max-width: 1439px) {
  .test::before { content: '1360px - 1439px'; }
}
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  .test::before { content: '1440px - 1919px'; }
}
@media only screen and (min-width: 1920px) and (max-width: 2499px) {
  .test::before { content: '1920px - 2499px'; }
}
@media only screen and (min-width: 2500px) and (max-width: 3839px) {
  .test::before { content: '2500px - 3839px'; }
}

Answer 2

我不知道这是否有帮助，但经过几个小时的困惑后，我发现我不见了：<meta name="viewport" content="width=device-width, initial-scale=1">。

现在一切恢复正常-.-

css 媒体查询不适用于某些分辨率

css media queries not working for certain resolutions

css

media-queries