Настройка размера шрифта динамически с помощью CSS

Question

У меня есть следующие HTML и CSS кода:

HTML:

<div> 
    <a href="#">ITALIANO</a> 
    <a href="#">ENGLISH</a> 
    <a href="#">FRANÇAIS</a> 
    <a href="#">DEUTSCH</a> 
</div> 

CSS:

div>a{ 
    margin-left: 30px; 
} 

div{ 
    font-size: 28px; 
    width: 70%; 
    margin: 2% auto; 
} 

Там нет никаких проблем при нормальном увеличении. Проблема возникает, когда я увеличиваю и уменьшаю масштаб, поскольку текст становится слишком большим, что делает его использование двух строк или становится слишком маленьким. Есть ли способ настроить размер шрифта динамически без JavaScript?

Благодаря

Answer 1

взятые из этого SO answer, вы можете установить размер шрифта, чтобы ответить на ширину окна просмотра.

p { 
    font-size: 30px; 
    font-size: 3.5vw; 
} 

Более подробную информацию можно найти на сайте CSS Tricks.

Answer 2

Я собирался предложить (пока я не увидел ответ @Jacob на типографской типографии с видовым экраном, не знал бы об ошибках). Идея назначает универсальный размер шрифта в вашем html-коде внутри вашего кода css. Размер базового шрифта равен 16px = 1em. Тогда остальная часть размера шрифта вашего CSS-кода может быть в процентах, что сделает их отзывчивыми в соответствии с шириной экрана. Например:

html { 
font-size: 1em; 
} 

div>a{ 
margin-left: 30px; <-- I would use left margin as percentage here, which will adjust according to screen width. 
    } 

div{ 
font-size: 175%; <-- this is for 28px 
width: 70%; 
margin: 2% auto; 
}