为什么我的媒体查询在引导程序上不起作用？

【问题标题】：why are my media queries not working on bootstrap?为什么我的媒体查询在引导程序上不起作用？
【发布时间】：2018-11-21 05:57:37
【问题描述】：

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>

【问题讨论】：

标签： css media-queries

【解决方案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 */）。

【讨论】：