Question

我在下面粘贴了我的代码。一个特定的div（.header > ul> li> a）的字体大小没有改变。其他div正常工作。请帮助

@media only screen and (max-width:666px) {

  .header > ul> li> a{
    font-size: 22px;
  }

  .logo{
    font-size: 18px;
  }
}

<div style="display:flex;justify-content:space-between">
  <div style="display:flex;justify-content:flex-start;">
    <img src="/static/emblem.jpg" height="65" width="115" >
    <div class="logo" ></div>
    <div class="header" style="padding:0 0 0 15px">
      <ul  class="header_fields" style="display:flex;justify-content:center;padding:40px 0 0 0">
      <li><a href= "{% url 'login_new' %}" target="ifr" ONCLICK="setTitle1()" > Home</a></li>
      <li><a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()"> <title>RCE-About</title>About Us</a></li>
      <li><a href="{% url 'products' %}" target="ifr" onclick="setTitle3()" >Products</a></li>
      <li><a href="#" target="ifr" onclick="setTitle4()">Solutions</a></li>
      <li><a href="{% url 'contacts' %}" target="ifr" onclick="setTitle5()">Support</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

在提供的示例中没有关闭@media查询标记。但是您的选择器可以简化为选择这样的超链接：

@media only screen and (max-width:666px) {
  .header_fields li a {
    font-size: 22px;
  }
  .logo {
    font-size: 18px;
  }
}

<div style="display:flex;justify-content:space-between">
  <div style="display:flex;justify-content:flex-start;">
    <img src="/static/emblem.jpg" height="65" width="115">

    <div class="logo"></div>
    <div class="header" style="padding:0 0 0 15px">

      <ul class="header_fields" style="display:flex;justify-content:center;padding:40px 0 0 0">
        <li><a href="{% url 'login_new' %}" target="ifr" ONCLICK="setTitle1()"> Home</a></li>
        <li>
          <a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
            <title>RCE-About</title>About Us</a>
        </li>
        <li><a href="{% url 'products' %}" target="ifr" onclick="setTitle3()">Products</a></li>
        <li><a href="#" target="ifr" onclick="setTitle4()">Solutions</a></li>
        <li><a href="{% url 'contacts' %}" target="ifr" onclick="setTitle5()">Support</a></li>
      </ul>


    </div>
  </div>
</div>

特定媒体查询中的字体大小不变

1 个答案: