2

我有一个纯文本徽标，并设置了 3 个媒体查询来响应不同的屏幕尺寸。在 Firefox 中，媒体查询可以正常工作，但在 safari 中，最后一个 @media (max-width: 680px) 对字体大小没有影响。

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

谢谢！

4

1 回答 1

1

我想你只是忘了关闭一些括号！我总是对媒体查询进行此操作，因为它们在我的代码编辑器中对代码进行了奇怪的着色。

在第二个 @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*/
于 2013-07-02T20:07:15.570 回答