Как использовать медиа -запросы с EM для изменения поведения в соответствии с размером шрифта? ⇐ Html

[Anonymous]

У меня есть слайдер размера шрифта для доступности, и я просто изменил все необходимые элементы для использования EMS вместо PXS, чтобы они масштабировались соответствующим образом. Однако, с большими размерами шрифтов, многие элементы попадают друг на друга по ширине экрана, чем они делали, когда у меня был один набор размер шрифта, и я хотел бы это исправить. Соотношения между размерами экрана и изменениями, вызванными моими медиа -запросами, работают, когда шрифт является размером по умолчанию, поэтому кажется интуитивным, что я должен просто изменить свои медиа -запросы и на EMS, но когда я делаю, это ничего не меняется. Самый простой пример, о котором я могу подумать, приведен ниже, но то же самое происходит на моем сайте. Я тоже пытался использовать REMS для ударов, но это ничего не изменило. Любая справка приветствуется.

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

.folders {
display: grid;
gap: 0.75em;
padding: 0.75em;

.folder {
padding: 0.75em;
width: 100%;
}

@media only screen and (min-width: 70em) {
grid-template-columns: repeat(5, 1fr);
}

@media only screen and (min-width: 55em) and (max-width: 70em) {
grid-template-columns: repeat(4, 1fr);
}

@media only screen and (min-width: 35em) and (max-width: 55em) {
grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 35em) {
grid-template-columns: repeat(2, 1fr);
}
}< /code>


Folder 1

Folder 2

Folder 3

Folder 4

Folder 5

Подробнее здесь: https://stackoverflow.com/questions/796 ... -font-size