Html 根据屏幕大小调整字体大小

嘿，伙计们，我有一个小问题，根据屏幕大小调整字体大小。我使用的是Bootstrap3及以下版本

以下是我的less代码顶部的一个示例：

@font-size-base:          16px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.3)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.35)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

到目前为止还不错。在此之后，我有以下几点：

h1.pageTitle {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h1;
  font-weight: 300;
  color: #2aace3;
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}

h2 {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h2;
  font-weight: 300;
  text-align: center;
}
h3 {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h3;
  font-weight: 300;

}
h4 {
  color: #555;
  font-size: @font-size-base;
}
p, .button, li {
  font-family: @font-family-sans-serif;
  font-size: @font-size-base;
  font-weight: 300;
  margin: 0 0 0px;
  line-height: @line-height-base;
}

在LESS文件的末尾，我有：

    @media (min-width: @screen-sm-min) {

      @font-size-base:          22px !important;
      @font-size-large:         ceil((@font-size-base * 1.25)) !important; // ~18px
      @font-size-small:         ceil((@font-size-base * 0.85)) !important; // ~12px

      @font-size-h1:            floor((@font-size-base * 2.6)) !important; // ~36px
      @font-size-h2:            floor((@font-size-base * 2.15)) !important; // ~30px
      @font-size-h3:            ceil((@font-size-base * 1.7)) !important; // ~24px
      @font-size-h4:            ceil((@font-size-base * 1.25)) !important; // ~18px
      @font-size-h5:            @font-size-base !important;
      @font-size-h6:            ceil((@font-size-base * 0.85)) !important; // ~12px

}

一切正常，应该没有任何问题。但是，我在检查最小屏幕大小的媒体查询上方添加了以下代码：

#course-info {
  #accordion {
    .panel {
      border: none;
      box-shadow: none;
      .panel-heading {
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        h3 {
          font-size: @font-size-h3;
        }
      }
    }
   }
}

出于某种原因，我无法解释#accordion代码中的H3标记是从文件顶部拾取基本字体大小的，根据引导法，它应该用于xs屏幕大小，即使我在浏览器上查看它

我之所以需要这样做，是因为我想将该标记上的H3值调整为其他值，因此最终我会得到如下结果：

    #course-info {
  #accordion {
    .panel {
      border: none;
      box-shadow: none;
      .panel-heading {
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        h3 {
          ceil((@font-size-h3 * 0.85)) !important;
        }
      }
    }
   }
}

如果我更改了媒体查询中的基值，页面的整个文本都会更改，但那些特定的H3标记除外。有人能给我解释一下发生了什么事吗

干杯，

---

dan

您可以使用em或百分比根据屏幕大小重新调整字体大小。em计数基于您的字体大小。百分比（%）基于您的屏幕站点。两者都将自动调整

22*1.7是~37…修改你的数学16*1.35只是接近22（~21.6），所以与基数（22px）没有明显的差异是正确的我的h3浏览器大小应该是38px，然而，在特定的h3标签上，它选择了较小的一个，即16*1.35=22px，即使我在一个大屏幕上，如果我从样式中注释出h3类，它将选择由一般h3规则设置的正确的38px大小，只要我将h3规则放入其中，它就会用较小的规则覆盖。出于某些原因，您甚至在媒体查询中设置了屏幕大小的值。。看起来你没有。。阅读有关媒体查询的更多信息