时间戳

首页 > 解决方案 > 由于媒体查询中的样式规则，为什么文本大小没有按预期改变？

html - 由于媒体查询中的样式规则，为什么文本大小没有按预期改变？

问题描述

我正在尝试编写一个导航栏，其文本会通过 query.css 文件中的媒体查询进行缩小和放大。目前，字体大小调整在定义的屏幕宽度上没有响应。页面的其他部分正在响应相同的 queries.css 表。当我将背景颜色设置为红色时，该更改在 600 像素处触发，而不是定义的 800 像素标记。背景颜色有反应，但字体大小没有。

我已按照此处的建议将选择器指定为.navbar a:link，但这没有奏效。

我现在的问题：

  1. 为什么在 600px 而不是 800px 触发背景颜色变化？
  2. 为什么我的字体大小在 800 像素时没有响应？

html:

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

  <header>
    <div class="nav-wrapper">
      <nav class="navbar">
        <img src="/resources/css/images/HackAgeLogo1.png" alt="hackage-logo" />
        <a href="#"> Aging as Disease </a>
        <a href="/Senescence/senescense.html"> Cellular Senescence </a>
        <a href="/companies/companies.html"> Companies </a>
        <a href="#"> Clinical Trials </a>
        <a href="#"> Reading List </a>
        <a href="npi/npi.html"> Supplements & NPI </a>
      </nav>
    </div>
  </header>

样式.css：

.navbar a:link,
.navbar a:visited {
  border: 1px solid red;
  padding-top: 5px;
  padding-bottom: 10px;
  width: 15%;
  height: 35px;
  text-align: center;
  line-height: 0.9;
  text-decoration: none;
  font-size: 80%;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
  margin: 2%;
  transition: text-decoration 0.3s;
  -webkit-transition: text-decoration 0.3s;
  -moz-transition: text-decoration 0.3s;
  -ms-transition: text-decoration 0.3s;
  -o-transition: text-decoration 0.3s;
}
.navbar a:hover,
.navbar a:active {
  text-decoration: underline;
  text-decoration-color: #41aea9;
  text-decoration-thickness: 3px;
  -moz-text-decoration-color: #41aea9;
}

query.css （这不响应）

@media only screen and (max-width: 800px) {
  .navbar a {
    background-color: red;
    font-size: 80%;
  }
}

谢谢

标签： htmlcssmedia-queries

解决方案

目前queries.csson中的样式被under中.navbar a的样式覆盖，因为这是一个更具体的选择器。要使查询中的样式应用于您可以更改为匹配的链接。styles.css.navbar a:link.navbar a.navbar a:link

@media only screen and (max-width: 960px) {
  .navbar a:link {
    font-size: 80%;
  }
}

这对我有用（字体在 960px 下变小，不确定您要查找的样式但查询生效）。

推荐阅读