Как исправить CSS размер шрифта для ограничения размера шрифта - PullRequest
Новая
       39

Как исправить CSS размер шрифта для ограничения размера шрифта

0 голосов
/ 02 июля 2019

Я работаю над классом, который я применяю к моей панели заголовка (header-top-container) в CSS, и я хочу, чтобы в зависимости от размера экрана размер текста 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

1 Ответ

0 голосов
/ 02 июля 2019

Чтобы создать отзывчивую типографику с минимальным и максимальным значением, вам нужно использовать комбинацию вычислений и медиа-запросов. Ниже приведен пример с минимальным размером шрифта 12 пикселей при 600 пикселей вниз и максимум 20 пикселей при 1000 пикселей и выше. 

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