CSS функция clamp(). Адаптивный размер текста. Прощайте медиа-запросы.

[@Дмитрий-д8о6м]

Отлично. Только вчера интересовался этой темой, потому что надоело на глаз задавать fz для @media. Нашел несколько решений и вот ваше видео.👍

[@АннаГант-л9б]

дай бог здоровья 🤝 очень доступно объясняете

[@ssr.1989]

От души душевно в душу!!! Просто объяснил и на хорошем примере! 👍

[@projectriders3427]

Спасибо большое за знания, добрый человек 😊

[@othersidesss1]

Как всегда - лучшее обьяснение

[@autlady]

Здорово, спасибо, Юрий, очень полезно ❤

[@shm288-o3c]

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

[@Anatoli-bq1pe]

Благодарю за очень полезное видео!

[@svg5359]

Отличная, полезная функция. 👍спасибо!

[@ilyaVnukchinskiy]

спасибо за нужный и полезный контент

[@ringnull]

Круто, буду использовать.

[@Selen_El_En]

Супер! Спасибо❣️

[@alEL321]

Отличная работа!)

[@Goddamn_Right]

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

[@senianga1]

Это офигенно!

[@datoshcode]

Спасибо!

[@djdrey4539]

спасибо. А если функций clamp() будет много на странице как это скажется на производительности?

[@YaroslavlCity]

Едва досмотрел, - полез заказчику на сайт применить.

[@ВикторКузнецов-о1ь]

Юрий, какая это тема в VS Code?

[@PavelAleksiaichuk]

А как на производительность страницы влияет clamp()?

[@КоляГришакин-й1л]

Круто

[@michaelkamko]

Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.

[@WebCademy]

Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9

[@-Vladimir--]

Пример уже есть, интересно было бы посмотреть?

[@michaelkamko]

@@-Vladimir-- примеры не могу показать, так как крипта и анонимность. Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"

[@Spluny]

@@michaelkamkoа можете поделиться конкретно формулами, пж🙏

[@michaelkamko]

@@Spluny формула такая : переменная для обычного текста: 2.4 dvh (2.4 vw для портретной ориентации). Размеры больше: 3.2, 4.8, 6.4 и так далее. Размеры меньше: 1.6, 1,2 (Надеюсь, ничего не напутал)

[@AlexeyKravets]

А есть видео как такую среду разработки создать и настроить? Пока балуюсь в блокноте, но это только для простых вещей.

[@WebCademy]

Да, видео по редактору VS Code kzbin.info/www/bejne/b2WVoKRmlNtsa6c

[@biscvie]

👍

[@alexandrs.1706]

Спасибо, как всегда, четко, доступно, понятно.

[@RinatYouldashbaev]

IE 11 до сих пор не поддерживает(

[@Shukhratov]

Есть ли видео точно также но с блоками дивами картинками?

[@WebCademy]

Есть kzbin.info/www/bejne/oXK3hKmKpqeZhtk

[@Shukhratov]

@@WebCademy спасибо большое

[@IvanKeats-q3q]

4:20

[@ВиталийДавыдов-э4г]

Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.

[@WebCademy]

Тогда вам помогут медиа запросы, в сочетании с vw единицами измерения для размера текста.

[@ВиталийДавыдов-э4г]

@@WebCademy я так понимаю, то без медиазапросов всё равно никуда не денешься для адаптивной вёрстки?

[@WebCademy]

@@ВиталийДавыдов-э4г Да, они все равно нужны.

[@ВиталийДавыдов-э4г]

@@WebCademy Обречённость... они же подтормаживают загрузку..

[@WebCademy]

​@@ВиталийДавыдов-э4г На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.

[@PhilippJFray]

Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)

[@WebCademy]

Если у элемента всегда одинаковый размер то и менять его не надо и clamp в таком случае не нужен.

[@PhilippJFray]

@@WebCademy большое спасибо, тоже пришёл к такому выводу)

[@kontorasb2754]

firefox эта функция отрабатывает не так как ожидаешь, если использоват ее с rem единицами))

[@HappyHippyHome]

Почему бы не использовать классически устоявшиеся относительные величины, rem, em вместо этого?

[@monsherok]

Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)

[@walterwhite4407]

[@ВасилийАнисимов-ш1ц]

Привет! Хотел скачать код но там стоит пароль чтоб извлечь из папки .Получается что код не посмотреть ?

[@WebCademy]

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

[@WebCademy]

И я никогда не ставлю пароли на архивы с кодом которые выкладываю в общий доступ.

[@АлексейВольнов-ш2ч]

А как сделать выделение тела блока уголком как на видео ? Скажешь как с меня подписка навсегда

[@WebCademy]

Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.

[@АлексейВольнов-ш2ч]

​@@WebCademy11:06 когда например медиа запрос открываешь у тебя от открывающей скобки до закрывающей уголок подсвечивается

[@АлексейВольнов-ш2ч]

​@@WebCademy1:06 там также

[@WebCademy]

@@АлексейВольнов-ш2ч Настройка Editor › Bracket Pair Colorization: Enabled

[@yogalenovo8262]

6:26 8:36

[@yuritian8830]

не проще написать миксин?

[@WebCademy]

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

[@yuritian8830]

@@WebCademy проще, чем вот это вот всё.

[@artyrdanilov2791]

width можно так задавать ?

[@WebCademy]

Можно

[@artyrdanilov2791]

@@WebCademy а как ?

[@WebCademy]

@@artyrdanilov2791 Например так: width: clamp(200px, 20vw, 600px);

[@TheTalkingAndrew]

а можно ли это использовать для чего-то еще кроме font-size?

[@WebCademy]

Да, например для width или height, margin, padding.

[@obstb]

Для етого сервиса нужен еще один сервис чтоби переводть в пиксели, рукалицо

[@ЕвгенийИсаев-д1р]

Спасибо!