Размер шрифта CSS динамически между интервалами - PullRequest
Новая
       12

Размер шрифта CSS динамически между интервалами

0 голосов
/ 03 июля 2018

При небольшом размере экрана (для мобильных устройств) размер шрифта устанавливается на 14px. На действительно больших экранах размер шрифта установлен на 18px. Таким образом, оно никогда не может быть ниже 14px и никогда не выше 18px. Об этом заботятся медиазапросы.

Тогда у нас есть середина, где я хочу, чтобы размер шрифта был динамическим между 14px и 18px. Для этого я использую font-size: calc(.5vw + .85em);, который работает нормально, но не отлично. Я не знаю, как рассчитать его, начиная с 14px и заканчивая 18px между шириной экрана 40rem (16 * 40) и 65rem.

Есть идеи? 

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(.5vw + .85em);
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>
    text
  </p>
</div>

Я также добавил это здесь: https://jsfiddle.net/6ybkp7a1/6/

* 1 028 * Пример * +1029 *

Когда я нахожусь на экране шириной 40.1rem (чуть выше 40rem), у меня должен быть размер шрифта, например 14.1px (или что бы то ни было), чуть выше 14px.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Вы можете попробовать это. Он будет постепенно переходить от 14px к 18px.

Как это работает?

100vw - наш размер экрана, поэтому он будет варьироваться от 40rem до 65rem в нужном регионе. Минус 40rem у нас будет разница между 0rem и 25rem. 25rem равно (16px * 25) = 400px. Наше изменение теперь составляет от 0 до 400px, и если мы разделим на 100 и добавим 14px, у нас будет отклонение от 14px до 18px. 

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(14px + (100vw - 40rem)/100); /*or 14px + 1vw - 0.4rem */
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>
    text
  </p>
</div>
0 голосов
/ 03 июля 2018

Установите другой медиазапрос для min-width: 40rem вместе с другими имеющимися медиазапросами. Это должно заботиться о размере экрана между этими двумя размерами экрана, которые вы добавили.

Вот рабочий пример ( JSFiddle ): 

.wrap {
  font-size: 16px;
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

@media screen and (min-width: 40rem) {
  p {
    font-size: calc(.5vw + .85em);
  }
  p:before {
    content: 'Desktop: ';
    opacity: .5;
  }
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>text</p>
</div>
...