css - 使用@media为不同的屏幕宽度调整字体大小–在Safari中不起作用

我有一个纯文本徽标，并设置了3个媒体查询来响应不同的屏幕尺寸。在firefox中，媒体查询可以正常工作，但在野生动物园中，最后一个@media（最大宽度：680像素）对字体大小没有影响。

@media (max-width: 1000px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: relative;
   padding: 0 20px;
   margin: 20px auto;
   height:40px;
   margin-top:40px;
}

.logo p {
   text-align: center;
   text-indent: -110px;
}

.logo p a {
   font-size:140px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}

@media (max-width: 680px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: static;
   padding: 0 20px;
   margin: 20px auto;
   height:0px;
   margin-top:40px;
}

.logo p {
   text-align: left;
   text-indent: 0px;
}

.logo p a {
   font-size:80px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}

谢谢！

最佳答案

我认为您只是忘记了一些括号！我总是使用媒体查询来执行此操作，因为它们在我的代码编辑器中奇怪地为代码着色。

在第二个@media之前和代码末尾添加一个弯曲的方括号。

这是为你做的

    @media (max-width: 1000px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: relative;
   padding: 0 20px;
   margin: 20px auto;
   height:40px;
   margin-top:40px;
}

.logo p {
   text-align: center;
   text-indent: -110px;
}

.logo p a {
   font-size:140px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}}  /*Added bracket*/

@media (max-width: 680px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: static;
   padding: 0 20px;
   margin: 20px auto;
   height:0px;
   margin-top:40px;
}

.logo p {
   text-align: left;
   text-indent: 0px;
}

.logo p a {
   font-size:80px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}} /*Added Bracket*/