Жидкая типография

Я пытаюсь использовать плавную типографику, и цель состоит в том, чтобы масштабировать текст между размерами экрана от 300 до 1160 пикселей.

Так что в 1160px я хочу 56px H1 и мобильный 30px.

Проблема, которую я имею, состоит в том, что H1 увеличивается в размере после 1160 пикселей и продолжает увеличиваться.

h1 {
  font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));
}
<H1>Fluid Typography</H1>

Источник

4 ответа

Решение

Вам нужно ограничить расчет жидкости h1 между медиа-запросами. Попробуй это:

h1 { font-size: 30px; }

@media (min-width: 300px) { 
  h1 {
    font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));    
  }
}

@media (min-width: 1160px) { 
  h1 {
    font-size: 56px; 
  }
}

Во-первых, необходимо указать минимальный размер шрифта: это первая строка. Затем между двумя точками останова вы вводите расчет жидкости, который при 300px дает точно 30px из font-sizeи снова в 1160px рассчитывает точно 56px, После 1160px ты держишь это в 56px снова с помощью медиа-запроса. Таким образом, вы получаете плавный переход между статической и плавной типографикой между установленными точками останова.

Вы можете найти больше примеров этого здесь: https://www.madebymike.com.au/writing/fluid-type-calc-examples/ или здесь: https://www.smashingmagazine.com/2016/05/fluid-typography/

Дайте мне знать, если вам нужно больше примеров, я сделал много таких.

Источник

Обновление 2023 г.

По мере развития CSS больше нет необходимости использовать медиа-запросы, поскольку теперь CSS предлагаетфункция:

Источник

Если вы используете SCSS, вы можете использовать следующий Mixin:https://gist.github.com/MColl92/3229098c32e20c1d5593865a7e3ea3da

$min_screen_width: 360px;
$max_screen_width: 1448px;
$min_font_size: 38px;
$max_font_size: 52px;

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)}*
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

Чтобы применить глобально:

  1. Определите минимальную и максимальную ширину экрана
  2. Определите минимальный и максимальный размер шрифта для элемента H1 в пикселях
  3. Примените миксин жидкого типа к корневому элементу (html или селектор тела).
  4. Сгенерируйте таблицу px в rem из https://nekocalc.com/px-to-rem-converter. (ПРИМЕЧАНИЕ: вам нужно будет установить размер корневого шрифта max_font_size при генерации)
  5. Присвойте значения REM для font-size по мере необходимости
Источник

Вы можете отделить CSS, как это

@media screen and (max-width: 1160px) {
h1 {}
}
Источник
Другие вопросы по тегам