Масштабирование шрифта в зависимости от размера контейнера ⇐ CSS
-
Anonymous
Масштабирование шрифта в зависимости от размера контейнера
Мне трудно разобраться в масштабировании шрифтов.
В настоящее время у меня есть веб-сайт с телом font-size, равным 100%. 100% чего? Кажется, это рассчитано на 16 пикселей.
У меня сложилось впечатление, что 100 % каким-то образом относится к размеру окна браузера, но, очевидно, не потому, что размер окна всегда равен 16 пикселям, независимо от того, уменьшена ли ширина окна до ширины мобильного устройства или полноценного широкоэкранного рабочего стола.
>
Как масштабировать текст на сайте относительно его контейнера? Я пробовал использовать em, но это тоже не масштабируется.
Я считаю, что такие вещи, как мое меню, сжимаются при изменении размера, поэтому мне нужно уменьшить px font-size .menuItem среди других элементов в зависимости от ширины контейнера. (Например, в меню на большом рабочем столе 22px работает идеально. Уменьшите ширину планшета, и 16px будет более подходящим.)
Я знаю, что могу добавлять точки останова, но я действительно хочу, чтобы текст масштабировался так же хорошо, как и при наличии дополнительных точек останова, иначе у меня будут сотни точек останова на каждые 100 пикселей. уменьшите ширину для управления текстом.
Мне трудно разобраться в масштабировании шрифтов.
В настоящее время у меня есть веб-сайт с телом font-size, равным 100%. 100% чего? Кажется, это рассчитано на 16 пикселей.
У меня сложилось впечатление, что 100 % каким-то образом относится к размеру окна браузера, но, очевидно, не потому, что размер окна всегда равен 16 пикселям, независимо от того, уменьшена ли ширина окна до ширины мобильного устройства или полноценного широкоэкранного рабочего стола.
>
Как масштабировать текст на сайте относительно его контейнера? Я пробовал использовать em, но это тоже не масштабируется.
Я считаю, что такие вещи, как мое меню, сжимаются при изменении размера, поэтому мне нужно уменьшить px font-size .menuItem среди других элементов в зависимости от ширины контейнера. (Например, в меню на большом рабочем столе 22px работает идеально. Уменьшите ширину планшета, и 16px будет более подходящим.)
Я знаю, что могу добавлять точки останова, но я действительно хочу, чтобы текст масштабировался так же хорошо, как и при наличии дополнительных точек останова, иначе у меня будут сотни точек останова на каждые 100 пикселей. уменьшите ширину для управления текстом.
Мобильная версия