Question

以下代码在iPad上没有做任何事情，尽管与桌面相比字体应该更大......为什么会这样？

<style type="text/css">
@media screen and (min-device-width: 481px) and (orientation:landscape) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 16pt;
line-height: 12pt;
width: 38.25em;
 }
}
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 12pt;
width: 38.25em;
}
</style>

Answer 1

尝试将@media查询移到另一个标题类下面，我相信第二个标题类会覆盖您的媒体查询

Answer 2

您是否尝试过测试媒体查询是否正常运行？例如，将字体更改为完全不同的字体或将背景颜色更改为红色。这样，您就会知道它是媒体查询还是拼写错误。如果它不是拼写错误，请为媒体查询添加最大的单独参数，以便浏览器不会混淆，并且您不需要重复代码。

.header {
        font-family: courier new, monospace;
        color: #999999;
        line-height: 12pt;
        width: 38.25em;
        }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and               (orientation:landscape
       {
       .header {
       font-size: 16pt;
          }
       }

@media only screen and (min-device-width: 1025px) {
      .header {
      font-size: 12pt;
          }
       }

媒体查询无法在iPad上运行

2 个答案: