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

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

试试这个

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

Answer 2

您在媒体查询中使用 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 3

试试这个：

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

Answer 4

4年后...

抱歉延迟回复，Igor。感谢您的等待。 8)

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

如果这不能解决问题，请尝试使用更大的浏览器宽度（例如 "max-width: 800" 或其他宽度）进行试验，以确保您的浏览器宽度肯定会触发媒体查询。

告诉我你过得怎么样。

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

Media query font-size not working

html

css

media