roblip
@roblip
Здесь может быть Ваша реклама

Как сделать «резиновый» текст?

Дело в том, мне нужно, чтобы текст был пропорционален экрану монитора. Как это сделать в идеале - не могу понять. em, % - вроде как должны давать такую возможность, но по-сути такими не являются. Как дальше быть? Получается, разница между мониторами 1366x768 и FullHD (1920x1080) небольшая, но используя те же em и т.д. разница в размерах огромная ( когда на fullhd мониторе шрифт почти не видно, то на моем мониторе текст просто огромный ).


Как быть, должен же быть выход, которым, и я уверен, что им пользуются все более-менее профессиональные разработчики
  • Вопрос задан
  • 5969 просмотров
Решения вопроса 3
SkiperX
@SkiperX Куратор тега CSS
font-size: calc(1rem + 1.23vw);
это использую
1rem нужен чтобы на телефоне шрифт не был мелким
величина шрифта задается в vw
Ответ написан
Комментировать
Не забывайте про vw, vh, vmin и vmax
Я обычно использую vmin - размер изменяется пропорционально той стороне экрана, которая меньше. Это удобно, когда делаешь респонсив с текстом.
Но в вашем случае можно использовать и vw - размер текста будет напрямую зависеть от ширины дисплея.

Что касается em и процентов - то они зависят исключительно от значений размеров родительских контейнеров.
Ответ написан
Комментировать
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
делаешь все шрифты через em, а потом в media меняешь font-size у body при нужных разрешениях экранов
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Да буду закидан я помидорами
fittextjs.com
Ответ написан
Комментировать
@denistrator
Front-end Developer
Вот тут всё великолепно расписано. Если умеете пользоваться sass, это что что нужно.
Ещё можно просто сделать размеры фиксированными, и менять с помощью медиа запросов. Для того чтобы имея 2 размера экрана и 2 размера шрифта на них найти 3 размер шрифта для 3-го экрана я сделал вот такой простенький калькулятор
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы