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

Question

[Demigodd]

Как сделать респонсивный текст во всем проекте, есть готовые решения ?
К примеру магия какая нибудь в body прописать его и вуаля, весь текст на разных экранах выглядит супер...

Comments

[Rustam Bainazarov]

Какой нужен эффект от этого вообще?

Answer 1

[Сергей Горячев]

https://habr.com/ru/post/42151/
devacademy.ru/posts/razmier-shriftov-v-css-em-px-p...

Answer 2

[Владимир]

Я использую для размера текста единицу vw. Тогда при уменьшении/увеличении окна браузера размер текста изменяется плавно.
Другой вариант - использовать media запросы в css. В этом случае придется прописывать размер для каждого тега или просто изменить его в теге body, если размер текста один на весь проект.

Comments

[Сергей Горячев]

Я использую для размера текста единицу vw. Тогда при уменьшении/увеличении окна браузера размер текста изменяется плавно.

Так себе решение... Особенно представляю какая жесть происходит на экранах 2800 и выше)

[Владимир]

Сергей Горячев, согласен. Но много ли проектов вообще рассчитывается для такой ширины окна. Кроме того, всегда есть возможность ограничить размер шрифта медиазапросом.

[Сергей Горячев]

Владимир,

Но много ли проектов вообще рассчитывается для такой ширины окна.

При чем тут много или мало проектов? Суть в том, что жесть будет твориться у всех пользователей широких мониторов, так как ты предлагаешь указывать шрифт в зависимости именно от нее.

[Rustam Bainazarov]

Вы существуете? Я понимаю, когда нужно добиться эффекта вёрстки для печати, когда контент полной страницы нужно уместить на размер экрана любого устройства, но для обычного сайта по типу Toster…

Это не адаптивность, это безумие.

P. S. Зачем менять значения в каждом теге? Достаточно прописать всё в rem и менять в теге body.

[Rustam Bainazarov]

Ну или к примеру, как вы думаете, почему ни один крупный сайт не использует vw для шрифтов? Да, правильно.

[Владимир]

Будем считать, что убедили ))) Но еще ни один мой заказчик ни на этапе бета-, ни на этапе альфа-тестирования, ни в эксплуатации, не возражал против такого подхода.

[Rustam Bainazarov]

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

Лучше сразу предусмотреть возможные проблемы и придерживаться общемировых практик. Я, к примеру, тоже не понимал до поры до времени сути использования rem/em для шрифтов. Не понимал, почему крупные проекты стремятся перейти к ним.

[Владимир]

SmthTo, em/rem я как раз понимаю. Просто проблема использования фиксированных единиц вкупе с брейкпойнтами в том, что изменение размера шрифта происходит скачкообразно на брейкпойнте. В действительности, это не имеет большого значения при скурпулезном подходе к выбору размера родительского шрифта для медиа составляющей. Т.е., например, у Вас есть стандартные брейкпойнты на 1200, 960 и 550рх (ну, или другие - не имеет значения). Тогда для каждого диапазона шрифты должны быть подобраны так, чтобы быть читабельными на любой ширине экрана из диапазона. Кстати, проблема сверхшироких экранов, о которой говорил Сергей Горячев, здесь тоже остается, только в профиль)))
С другой стороны, производители экранов, что для мобайлов, что для десктопов, сейчас уже потихоньку приходят к унификации размеров. Поэтому идея брейкпойнтов не только жива, но и очень перспективна.

[Rustam Bainazarov]

Владимир, я не могу понять, зачем всё же делать на vw даже на простом примере: iPhone 5, 7 и XS Max.

Если использовать px, em, rem, то высота шрифта будет одинаковой и комфортной на всех этих устройствах и текст будет занимать всё пространство планомерно.

Если я задам его в vw, то текст будет иметь разные размеры везде, занимая одинаковое пространство по ширине (т. е. на одной строке будет всегда одинаковое количество текста).

Тем самым мы теряем все плюсы увеличения экрана по ширине. Как бы текста должно помещаться больше, т. к. экран шире, но нет.

А брекйпоинты и не уходят никуда :))

[Владимир]

SmthTo, простите, не совсем Вас понял...
Если исходить из глобальных принципов типографики, весь контент должен занимать на странице 10-12% от общего пространства (правда, это принцип справедлив, в основном, для печатных изданий). Вот и представьте, что Вы используете респонсивные изображения, используя, скажем, в Bootstrap4, класс img-fluid. В этом случае, хоть с брейкпойнтами, хоть без, размер картинки будет изменяться плавно, а шрифт - нет. Попробуйте - увидите сами, я экспериментировал...
А то что Вы видите, как недостаток: "Как бы текста должно помещаться больше, т. к. экран шире, но нет.", на мой взгляд является преимуществом: количество строк и символов в строке становится одинаковым для всех экранов и не нужно заморачиваться с наложением блоков или, наоборот, с появлением между ними неоправданно больших паддингов.
Мне очень нравится эта дискуссия с Вами - она для меня очень информативна. Искренне благодарю.

[Rustam Bainazarov]

Владимир, как вы правильно заметили, это печатный принцип. И в печати он оправдан. И в вэбе он оправдан, когда нужно уместить одинаковое количество информации на все экраны, но это редкий случай.

Смотрите, такой вопрос: какой смысл в большом экране, если на него умещается столько же контента, как на маленьком?

[Владимир]

SmthTo, большой экран, он ведь большой не только по ширине, но и по высоте))) Так что информации уместится по любому больше)))
Но это уже юмор...
В реальности же Вы правы. Широкий экран хорош, например, при работе с большими таблицами Excel - видно больше столбцов без горизонтального скроллинга. Но и здесь есть обнадеживающий (меня!) момент: мало кто из владельцев больших экранов открывает браузер на всю ширину экрана. Кроме того, и это главное - решение обсуждаемой нами проблемы зависит на 100% от поставленной задачи. Если задача сформулирована так, что пользователь должен видеть на экране максимум информации, то правы Вы. Если главное в задаче - привлекательный и одинаковый дизайн для устройств с любым разрешением, то прав я.
Думаю, что и Ваш, и мой подход имеют право на существование. Все зависит от видения заказчика того, как должно ВЫГЛЯДЕТЬ решение поставленной задачи. Ну, и немного от того, как разработчик презентовал заказчику СВОЕ решение)))

[Rustam Bainazarov]

Владимир, я один странный принцип выработал: я смотрю на примеры популярных сайтов. Там не используют vw для шрифтов, и я понимаю — почему :))

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

[Владимир]

SmthTo, ну вот видите: и Вы используете! )))
И подскажите ламеру, как Вы видите использование или не использование vw, px, em/rem на сайте? По реакции окна браузера на изменение размера? Нет, правда, как можно добраться до сути класса в коде страницы в браузере?

[Rustam Bainazarov]

Владимир, я прошу прощения, не могли бы ли вы более подробно описать вопрос? Не совсем его понял.

[Владимир]

<@SmthTo,

я смотрю на примеры из популярных сайтов...

Как Вы их смотрите, понимая, что

Там не используют vw для шрифтов...

Более подробно вряд ли смогу)))

[Rustam Bainazarov]

Владимир, открываете консоль, заходите на любой сайт: Google (+ сервисы и т. п.), Rambler, Mail, Facebook, VK, AliExpress, Stripe, Wikipedia, Habr, TJournal и т. д.

И изучаете типографику :))

[Владимир]

SmthTo, последовал Вашему совету на Яндексе и Рамблере. Удивился: эти сайты вообще не заточены под принудительное изменение размера окна браузера)))
Вот, к примеру, скрин из Firefox для habr.ru:

Полагаю, что сайт определяет устройство пользователя и выдает ему соответствующую устройству верстку.

[Rustam Bainazarov]

Владимир, да, большинство сложных (и не очень) сайтов, у которых древняя история разработки, обладают мобильной версией. Сделано это для скорости отображения, чтобы не грузить лишние скрипты и стили.

Answer 3

[Ivan Bogachev]

Responsive And Fluid Typography With vh And vw Units.