Сделайте меню первого уровня вертикальным, если происходит переполнение, вызванное изменением размера шрифта в настройка ⇐ CSS

[Anonymous]

Я создаю простое меню первого уровня (здесь у меня есть минимально воспроизводимый пример) с помощью flexbox. Когда для семи ссылок недостаточно горизонтального пространства, я делаю меню вертикальным с помощью простого медиа-запроса (точка останова составляет 650 пикселей, и я использую подход «сначала рабочий стол»).
Однако из соображений доступности я должен убедиться что при увеличении текста содержимое по-прежнему в порядке (без переполнения), но это не так. Если я увеличу масштаб с помощью CTRL +, это нормально, но если я увеличу размер шрифта в настройках браузера, семь ссылок превысят контейнер, и в этом случае я не знаю правильную точку останова.
Я мог бы использовать flex- Wrap:wrap в теге ul, но в этом случае ссылки переходят на новую строку по одной, вместо этого я бы хотел, чтобы меню сразу стало вертикальным. Вы можете имитировать увеличенный размер шрифта в браузере с помощью font-size:2em в теге html (в коде есть комментарий). Вот код:

Код: Выделить всё

     * {
box-sizing: border-box;
}

/* html {
font-size: 2em;
} */

body {
margin: 0;
}

.main-menu {
border: 3px solid rgb(230, 121, 38);
padding-block: 0.5rem;
margin: 0 auto;
display: flex;
justify-content: center;
}

.main-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}

.main-menu ul li a {
display: block;
padding: 0.7rem;
text-decoration: none;
color: black;
text-transform: uppercase;
font-weight: bold;
font-size: 1.2rem;
border: 1px solid black;
text-align: center;
}

@media (max-width: 650px) {
.main-menu ul {
flex-direction: column;
}
}

Код: Выделить всё

[list]
[*][url=#]Link 1[/url]
[*][url=#]Link 2[/url]
[*][url=#]Link 3[/url]
[*][url=#]Link 4[/url]
[*][url=#]Link 5[/url]
[*][url=#]Link 6[/url]
[*][url=#]Link 7[/url]
[/list]

Я мог бы предвидеть точку останова (большую точку останова), чтобы сделать меню вертикальным для размера шрифта: 2em, но мне не нравится это решение. Есть ли решение в CSS только для решения этой ситуации? Если нет, существует ли решение для JavaScript?


Подробнее здесь: https://stackoverflow.com/questions/790 ... m-a-change