如何更正 CSS 字体大小计算以限制字体大小答案

【问题标题】：How to correct CSS font-size calculation to limit font size如何更正 CSS 字体大小计算以限制字体大小
【发布时间】：2019-11-13 10:32:26
【问题描述】：

我正在研究一个我在 CSS 中应用于我的标题栏（header-top-container）的类，我想要做的是根据屏幕大小让标题的 h1 文本大小以最大值动态调整大小为 28 像素。当我测试它时，随着窗口变大，文本大小不断变大......它永远不会停止。


.header-top-container {
    background: rgb(242,246,248);
    background: -moz-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8",endColorstr="#e0eff9",GradientType=1);
    padding: 10px;
    text-align: center;
    color:#05336b;
}

.header-top-container h1{
    margin-top:0;
    margin-bottom: 0;
    color: #05336b;
    line-height: .5;
    font-weight: 600;
    font-variant: small-caps;
    font-size: calc(14px + (28 - 14) * ((100vw - 300px)/(1600 - 300))); 

} ```

``` HTML
<div class="header-top-container">

        <div class="w3-mobile w3-content">
            <h1> 
                <img src="<?PHP echo SYS_URL;?>resources/logo/bc_ote_scfe_PMS288.png"  alt="Baruch College Office of Testing and Evaluation: Student Course and Facutly Evaluation Logo" class="header-main-logo" /> 
                <br>
                <span id="header-Logo_PageName_lg">5t3<?PHP echo $page_title;?> </span> 

            </h1>
        </div>

</div>

预期的输出是字体不大于 28px

【问题讨论】：

为什么不只使用一对media queries 并为标题选择几个字体大小来覆盖手机、平板电脑等，并将28px 设置为最大断点处的字体大小？
是的，这就是我要做的 ^^。而不是 calc()，我会使用 vw 测量值，但是......当字体“太大”不适合您的审美（并且太小，就此而言）时，弄清楚页面的宽度，然后弹出媒体查询强制字体为该大小。有些人称之为CSS locks。
我希望它是完全流畅和动态的，而用户可以改变他们的窗口大小，而不是让它急剧跳跃......正如css-tricks.com/books/volume-i/scale-typography-screen-size 中所讨论的那样（大约在页面的一半处）

标签： css font-size css-calc

【解决方案1】：

要创建具有最小值和最大值的响应式排版，您需要结合使用计算和媒体查询。下面是一个示例，在向下 600 像素时最小字体大小为 12 像素，在 1000 像素及以上时最大字体大小为 20 像素。

:root {
  font-size: 12px;
}
@media screen and (min-width: 600px) {
  :root {
    font-size: calc(  12px + (20 - 12) *  ( (100vw - 600px) / (1000 - 600) ) );
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 20px;
  }
}

这是我几年前创建的一支笔，用于在响应式文本中提供更多细节（也使用字体刻度）：https://codepen.io/WebNesting/pen/gwyvYg

所以你的数字是：

.header-top-container h1 {
    font-size: 14px;
}
@media screen and (min-width: 300px) {
  .header-top-container h1 {
    font-size: calc(14px + (28 - 14) *  ((100vw - 300px) / (1600 - 300)));
  }
}
/* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
@media screen and (min-width: 1600px) {
  .header-top-container h1 {
    font-size: 28px;
  }
}

【讨论】：