Как сделать такое меню адаптивным?

Question

[Waniman]

Нужно чтобы при изменении экрана, пункты сохраняли положение и пропорции

Answer 1

[Lord_Dantes]

А в чем сложность? Я вижу тут только пропорциональное уменьшение шрифта и width: 100% каждому пункту меню

Comments

[Waniman]

у меня основная проблема в том, чтобы сделать пункт "Главная" ровно по центру над другими названиями пунктов и при изменении экрана сохранять его в таком положении.

[Lord_Dantes]

Waniman, text-align: center в CSS

Answer 2

[Александр]

Самый простой способ задать на корневом элементе (т.е. html) font-size, какой вам угодно, в зависимости от разрешения экрана. А дальше плясать от него, т.е. размеры задавать в rem или em.
А далее либо задавать размер шрифта на корневом элементе с помощью медиа запросов (опять же в зависимости от разрешения), либо выставить font-size допустим в vw.

Comments

[Waniman]

у меня основная проблема в том, чтобы сделать пункт "Главная" ровно по центру над другими названиями пунктов и при изменении экрана сохранять его в таком положении.

Answer 3

[Eugen]

Вам нужно это по-моему: clamp()

Answer 4

[Вова Дружаев]

верстай флексами. Они позволят разнести эти 3 элемента в строке. Они позволят отцентровать. Ну и css переменную для шрифта и медиазапрос регулирующий его величину.

То что ты просишь это первоклашки класс в css делают.