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媒体查询不适用于某些决议

2 个答案: