Question

Bootstrap的新功能。我希望为较大的屏幕（iPad及以上）增加导航字体大小，但我的媒体查询似乎无法正常工作。

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
    
    .nav-link {
            font-size: 50px; 
            margin-left: 1.5%;}
    

}

<nav class="nav">
  <a class="nav-link" href="index.html"></a>
    <a class="nav-link" href="about.html">About </a>
  <a class="nav-link" href="berlin.html">Berlin </a>
  <a class="nav-link" href="los-angeles.html">LA</a>
</nav>

Answer 1

这是因为//在CSS中不是有效的注释，并且紧随其后中断了@media：

/* Only this comment is valid in CSS */：

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  .nav-link {
    font-size: 50px;
    margin-left: 1.5%;
  }
}

<nav class="nav">
  <a class="nav-link" href="index.html"></a>
  <a class="nav-link" href="about.html">About </a>
  <a class="nav-link" href="berlin.html">Berlin </a>
  <a class="nav-link" href="los-angeles.html">LA</a>
</nav>

很明显，它与Bootstrap无关。请注意，预处理器（例如LESS或SASS）正确解析//，并注释了整行（它们基本上将其转换为CSS输出中的一行/* comment */）。

为什么我的媒体查询无法启动？

1 个答案: