Question

我搜索过，但没有找到与我的问题类似的东西。

#navigation {
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  background: url(../images/bg.jpg) repeat top left;
  z-index: 9999;
}
#navigation a {
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  color: #F2B704;
  text-decoration: none;
}
#navigation a:hover {
  color: #D78E02;
}
@media only screen and (max-device-width: 480px) {
  #navigation a {
    font-size: 10px;
  }
}

<div id="navigation">
  <a href="#galerija">GALERIJA</a>
  <a href="#festival">FESTIVAL</a>
  <a href="#kontakt">KONTAKT</a>
</div>

媒体查询不会导致在较小的屏幕宽度上更改font-size，但它仍会保留在15px。我做错了什么？

Answer 1

您在媒体查询中使用max-device-width: 480px，因此您必须让meta viewport浏览器检测设备的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

您的代码没有错。您可以将max-device-width: 480px更改为max-width: 480px以查看您的代码是否有效。您只需在head代码中添加元视口。

Jsffidle

Answer 2

试试这个：

@media  (max-width: 480px) {
#navigation a {
  font-size: 10px !important;
} 
}

Answer 3

尝试这个

@media only screen and (max-device-width: 480px) {
 #navigation a {
  font-size: 10px !important;
 } 
}

Answer 4

4年后...

很抱歉，我的回复很晚。感谢您的等待。 8）

如果您仍然对此问题的答案感兴趣，或者如果其他人对此感兴趣，则我测试了您的代码，发现如果我将媒体标签选项从“ max-device-width：”更改为“ max- width：”，字体大小已更改。但我想这取决于设备大小与浏览器大小，因此这可能无法为您解决。

如果仍不能解决问题，请尝试使用更大的浏览器宽度（例如“最大宽度：800”）或其他尺寸，以确保您的浏览器宽度确实触发了媒体查询。

让我知道你过得怎么样。

媒体查询字体大小不起作用

4 个答案: