如何修正CSSfont-size计算限制字体大小

Question

我正在研究 class，我正在 CSS 中将其应用于我的 header 栏 (header-top-container)，我想做的取决于屏幕大小可以动态调整 header 的 h1 文本大小，最大大小为 28px。当我对其进行测试时，随着 window 变大，文本大小不断变大……它永远不会停止。


.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

Answer 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;
  }
}

这是我几年前创建的一支笔，用于在响应式文本中提供更多细节（也使用 typescales）：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;
  }
}

如何修正CSSfont-size计算限制字体大小

How to correct CSS font-size calculation to limit font size

css

font-size

css-calc