Question

我正在研究要应用到CSS中的标题栏（header-top-container）的类，我想要做的是取决于屏幕大小，以最大程度动态调整标题的h1文本大小大小为28px。当我对其进行测试时，随着窗口的增大，文本大小会不断增大……它永远不会停止。


.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

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

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

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

1 个答案: