无法更改@media的字体大小
问题描述:
我试图让浏览器窗口变小时减小字体大小的菜单。下面是我得到了什么:无法更改@media的字体大小
的CSS:
@media screen and (max-width : 1115px) {
/*Make font on menu smaller*/
nav a {
font-size: smaller;
}
}
nav a {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
height: 20px;
color: #171581;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
font-weight: 100;
font-size: medium;
}
HTML
<nav>
<label for="show-menu" class="show-menu"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#" class="top-menu" id="about">About</a></li>
<li><a href="#" class="top-menu" id="residential">Residential & Business</a></li>
<li><a href="#" class="top-menu" id="myaccountdetails">My Accounts Details</a></li>
<li><a href="#" class="top-menu faqs active" id="faq">FAQ</a></li>
<li><a href="#" class="top-menu" id="contactus">Contact us</a></li>
</ul>
</nav>
至于我可以从我读过这个应该合作论坛上说,但当我调整窗口大小时,没有任何效果。
此问题并非完全重复。这篇文章是问是什么错,另一篇文章是问为什么这样。
答
font-size: medium;
始终应用,因为它出现在媒体查询之后。简单地重新排列你的风格:
nav a {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
height: 20px;
color: #171581;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
font-weight: 100;
font-size: medium;
}
@media screen and (max-width : 1115px) {
/*This is later in the order of styles, so will be applied when the screen is <= 1115px */
nav a {
font-size: smaller;
}
}
你尝试把@media块中的原始风格块之后? – Quantastical
它的父元素的字体大小是什么?它是否设置?这可能会影响到你。退房:https://css-tricks.com/almanac/properties/f/font-size/ –
显然你做。谢谢你。 –