Оновлення калькулятора font-size

Юрій Чернієвський 2 хвилини читання

Оновлення інструменту font-size з CSS calc() & clamp() – версія 2.0.0

Радий представити оновлену версію Калькулятора font-size з CSS calc() & clamp(), інструменту для веброзробників та дизайнерів, який допомагає швидко розраховувати адаптивні розміри шрифтів. У версії 2.0.0 я додав низку зручних функцій та покращень для ефективної роботи з rem, vw та clamp().

Що нового?

1. Автоматичне оновлення viewport

Тепер ширина вікна обчислюється автоматично при зміні розміру браузера. Розрахунок шрифту оновлюється миттєво, що дозволяє швидко тестувати адаптивність на різних екранах.

2. Режим clamp()

Ви можете перемикатися між calc() та clamp() одним кліком. Це допомагає задавати мінімальні та максимальні значення шрифту, забезпечуючи повну гнучкість при адаптивній верстці.

3. Візуалізація шрифту

Миттєва візуалізація обраного розміру шрифту допомагає оцінити, як текст виглядатиме в реальному часі. Тепер не потрібно постійно вставляти код у сторінку для перевірки.

4. Пресети для швидкого старту

Було додано три пресети:

  • Адаптивний H1 – ідеальний для заголовків.
  • Гнучкий Body – для основного тексту.
  • Мобільний пріоритет – оптимізовано для малих екранів.

Це дозволяє почати розрахунки без ручного введення значень.

5. Історія розрахунків

Інструмент тепер зберігає останні 10 обчислень у локальному сховищі браузера. Ви можете швидко повернутися до попередніх розрахунків, очистити історію або експортувати її у форматі JSON.

6. Приклади для різних viewport

Кнопка «Приклади viewport» показує, як шрифт виглядатиме на екранах шириною 320px, 768px та 1920px. Це допомагає планувати дизайн під різні пристрої.

7. Поліпшене управління темою

Перемикайтеся між світлою та темною темою, а вибрана тема зберігатиметься у браузері.

Для кого це корисно

  • Цей калькулятор стане у нагоді:
  • Вебдизайнерам, які створюють адаптивні сайти.
  • Frontend-розробникам, які використовують rem, vw та clamp() у CSS.

Будь-кому, хто хоче швидко розрахувати гнучкі розміри шрифту без ручних формул.

Версія 2.0.0 робить процес розрахунку шрифту простим, наочним та зручним. Ви зможете створювати реально адаптивні шрифти для будь-якого проекту за лічені хвилини.

Спробувати калькулятор зараз →

✶ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✶

З повагою та найкращими побажаннями — Юрій Чернієвський!

✶ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✶