Question

嘿伙计我根据屏幕大小调整字体大小有一个小问题。我使用Bootstrap 3和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标记。有人可以向我解释发生了什么事吗？

欢呼声，担

Answer 1

您可以根据屏幕大小使用em或percent来调整字体大小。 em根据您的正文字体大小计算。百分比（％）基于您的屏幕网站。两者都会自动调整。

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

1 个答案: