Для управління розміром шрифту в залежності від розміру екрану використовують CSS-властивість font-size разом з медіа-запитами (media queries) або адаптивними одиницями виміру. Це не окремий тег, а підхід у стилях.

Основні способи:

1. Медіа-запити (найпоширеніший спосіб)

```css
/* Базовий розмір */
body {
  font-size: 16px;
}

/* Для планшетів */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Для мобільних пристроїв */
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

/* Для великих екранів */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}
```

2. Адаптивні одиниці виміру (vw, vh)

```css
/* Розмір шрифту буде 4% від ширини вікна перегляду */
body {
  font-size: 4vw; /* Обережно: може бути занадто великим на широких екранах */
}

/* Більш контрольований варіант */
body {
  font-size: calc(12px + 0.5vw); /* Мінімум 12px + динамічна частина */
}

h1 {
  font-size: calc(24px + 1vw); /* Для заголовків більший розмір */
}
```

3. Комбінований підхід (рекомендовано)

```css
:root {
  font-size: 16px;
}

/* Адаптація за допомогою медіа-запитів */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 12px;
  }
}

/* Використання rem для масштабування */
body {
  font-size: 1rem; /* 1rem = розміру шрифта в :root */
}

h1 {
  font-size: 2.5rem; /* Автоматично адаптується */
}

p {
  font-size: 1.125rem;
}
```

4. Сучасний підхід з clamp() (CSS3)

```css
body {
  /* Мінімум 16px, бажано 2vw, максимум 24px */
  font-size: clamp(16px, 2vw, 24px);
}

h1 {
  /* Мінімум 24px, бажано 5vw, максимум 48px */
  font-size: clamp(24px, 5vw, 48px);
}
```

Повний приклад HTML+CSS:

```html



    
    
    Адаптивний шрифт
    


    

        
Заголовок сторінки

        
Це приклад тексту з адаптивним розміром шрифта. На різних пристроях текст буде автоматично масштабуватися.

    



```

Рекомендації:

· Використовуйте rem замість px для кращої доступності
· Задавайте базовий розмір у :root або html
· Тестуйте на різних пристроях
· Враховуйте line-height для читабельності

Найсучасніший підхід - комбінація clamp() з медіа-запитами для максимальної гнучкості та контролю.

-----------------
Ось приклади комбінації clamp() з медіа-запитами для максимально гнучкого контролю розміру шрифту:

1. Базовий приклад з медіа-запитами та clamp()

```css
/* Базові стилі */
:root {
  font-size: clamp(16px, 2vw, 20px);
}

/* Планшети */
@media (max-width: 768px) {
  :root {
    font-size: clamp(14px, 2.5vw, 18px);
  }
}

/* Мобільні пристрої */
@media (max-width: 480px) {
  :root {
    font-size: clamp(12px, 3vw, 16px);
  }
}

/* Великі екрани */
@media (min-width: 1440px) {
  :root {
    font-size: clamp(18px, 1.5vw, 22px);
  }
}

body {
  font-size: 1rem;
}

h1 {
  font-size: clamp(28px, 5vw, 48px);
}
```

2. Покращена версія з кастомними властивостями

```css
:root {
  /* Базові значення для clamp */
  --min-font: 16px;
  --pref-font: 2vw;
  --max-font: 20px;
  
  font-size: clamp(var(--min-font), var(--pref-font), var(--max-font));
}

/* Медіа-запити змінюють змінні */
@media (max-width: 1200px) {
  :root {
    --min-font: 15px;
    --pref-font: 2vw;
    --max-font: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --min-font: 14px;
    --pref-font: 3vw;
    --max-font: 16px;
  }
  
  h1 {
    /* Перевизначення для заголовків */
    font-size: clamp(24px, 6vw, 36px);
  }
}

@media (max-width: 480px) {
  :root {
    --min-font: 12px;
    --pref-font: 3.5vw;
    --max-font: 14px;
  }
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size: clamp(32px, 5vw + 1rem, 64px);
}
```

3. Повний HTML-приклад з різними елементами

```html



    
    
    Clamp + Медіа-запити
    


    

        
Адаптивний дизайн з clamp()

        
        

            
Переваги цього підходу

            
Комбінація clamp() з медіа-запитами дає максимальну гнучкість. Ми можемо задати базові значення через clamp(), а потім тонко налаштувати їх на різних брейкпоінтах.

            
Це особливо корисно для типографіки, де потрібен плавний масштабування, але з чіткими обмеженнями.

        

        
        

            
Як це працює

            
На великих екранах текст масштабується плавно за допомогою clamp(). На малих екранах ми змінюємо параметри clamp() через медіа-запити, щоб забезпечити оптимальну читабельність.

            
Спробуйте змінити розмір вікна браузера, щоб побачити ефект.

        

    



```

4. Спеціалізований підхід для заголовків

```css
/* Базові значення для всіх екранів */
.text-scale {
  font-size: clamp(16px, 4vw, 24px);
}

/* Тонке налаштування для різних пристроїв */
@media (max-width: 1200px) and (min-width: 769px) {
  .text-scale {
    font-size: clamp(15px, 3.5vw, 22px);
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  .text-scale {
    font-size: clamp(14px, 4vw, 20px);
  }
}

@media (max-width: 480px) {
  .text-scale {
    font-size: clamp(13px, 4.5vw, 18px);
  }
}

@media (min-width: 1800px) {
  .text-scale {
    font-size: clamp(18px, 2vw, 28px);
  }
}
```

Переваги комбінації:

1. Плавність - clamp() забезпечує плавне масштабування
2. Контроль - медіа-запити дають точний контроль на брейкпоінтах
3. Простота - менше коду, ніж при використанні окремих медіа-запитів
4. Доступність - гарантовані мінімальні та максимальні розміри

Такий підхід особливо корисний для сучасних адаптивних сайтів, де потрібно балансувати між плавністю та точним контролем.

------------

Mobile-first верстка з мінімальним кодом

```html



    
    
    Mobile First
    


    

        
Mobile First

        
Мінімальна адаптивна верстка. Зменшуйте/збільшуйте вікно браузера.

    

    
    

        

            
Картка 1

            
Контент для мобільних пристроїв перш за все, потім адаптація для планшетів та десктопів.

        

        
        

            
Картка 2

            
Мінімальний код, максимум результат. Використовуємо сучасні CSS технології.

        

        
        

            
Картка 3

            
Clamp() для адаптивної типографіки, grid для розмітки, медіа-запити для контрольних точок.

        

    

    
    


```

Ультра-мінімальна версія (161 рядок з коментарями):

```html





Mobile First




Mobile First


Мінімальна адаптивна версія.




Картка 1
Контент для мобільних.


Картка 2
Потім для планшетів.


Картка 3
Нарешті для десктопів.





```

Основні принципи mobile-first у цьому коді:

1. Базова верстка для мобільних - стилі без медіа-запитів працюють на всіх пристроях
2. Поступове покращення - медіа-запити min-width додають можливості для більших екранів
3. Мінімальний код - використано тільки необхідні властивості
4. Сучасні технології:
   · clamp() для адаптивних шрифтів
   · CSS Grid для розмітки
   · box-sizing: border-box для простоти розрахунків
   · Системні шрифти для кращої продуктивності

Цей код займає мінімум місця, але повністю функціональний для створення адаптивної сторінки з підходом mobile-first.

---------

Мінімальний код з бургер-меню та підменю

```html





Mobile First + Бургер





 
Mobile First

 

  
  
  
 







Мінімальна адаптивна версія з бургер-меню.



 
Картка 1
Контент для мобільних.

 
Картка 2
Потім для планшетів.

 
Картка 3
Нарешті для десктопів.







```

Ультра-мінімальна версія (без вкладених підменю):

```html





Мінімальний бургер




Сайт




 
Картка 1
Текст

 
Картка 2
Текст

 
Картка 3
Текст






```

Особливості реалізації:

1. Бургер-меню:
   · Анімоване випливання з правого боку
   · Напівпрозорий фон з ефектом blur
   · Автоматично ховається на десктопі
2. Адаптивність:
   · Mobile-first підхід
   · На мобільних: бургер-меню
   · На десктопі: горизонтальне меню
3. Підменю:
   · Багаторівнева структура
   · На мобільних: розкриваються по кліку
   · На десктопі: розкриваються по hover
4. Мінімалізм:
   · Тільки необхідні стилі
   · Мінімальний JavaScript
   · Немає зайвих бібліотек

Код повністю функціональний та займає мінімум місця.

-----------
Written by Kopanytsia Y.
Visit us at:
www.k123.org.ua
Online calculations of hydraulics 2024