как жаль, что на ваше видео я наткнулась только сегодня вчера был дедлайн по главной странице в курсаче и как раз была проблема с масштабированием текста, которую я решила более криво, чем в видео) спасибо!
Дело не в том, что может быть много текста в заголовке, а в том, что при vw высота текста растёт при увеличении ширины окна, а вот высота окна не обязательно вырастет, наоборот, может и уменьшиться. Поэтому заголовок может просто вытеснить другие элементы по высоте и сломать вам дизайн... если он есть)
Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.
Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9
@@-Vladimir-- примеры не могу показать, так как крипта и анонимность. Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"
@@Spluny формула такая : переменная для обычного текста: 2.4 dvh (2.4 vw для портретной ориентации). Размеры больше: 3.2, 4.8, 6.4 и так далее. Размеры меньше: 1.6, 1,2 (Надеюсь, ничего не напутал)
Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.
@@ВиталийДавыдов-э4г На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.
Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)
Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.
Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)
Отлично. Только вчера интересовался этой темой, потому что надоело на глаз задавать fz для @media. Нашел несколько решений и вот ваше видео.👍
дай бог здоровья 🤝 очень доступно объясняете
От души душевно в душу!!! Просто объяснил и на хорошем примере! 👍
Спасибо большое за знания, добрый человек 😊
как жаль, что на ваше видео я наткнулась только сегодня
вчера был дедлайн по главной странице в курсаче
и как раз была проблема с масштабированием текста, которую я решила более криво, чем в видео)
спасибо!
Как всегда - лучшее обьяснение
Здорово, спасибо, Юрий, очень полезно ❤
Отличная, полезная функция. 👍спасибо!
Благодарю за очень полезное видео!
спасибо за нужный и полезный контент
Круто, буду использовать.
Отличная работа!)
Это офигенно!
Супер! Спасибо❣️
Дело не в том, что может быть много текста в заголовке, а в том, что при vw высота текста растёт при увеличении ширины окна, а вот высота окна не обязательно вырастет, наоборот, может и уменьшиться. Поэтому заголовок может просто вытеснить другие элементы по высоте и сломать вам дизайн... если он есть)
Едва досмотрел, - полез заказчику на сайт применить.
Спасибо!
спасибо. А если функций clamp() будет много на странице как это скажется на производительности?
Юрий, какая это тема в VS Code?
А как на производительность страницы влияет clamp()?
Спасибо, как всегда, четко, доступно, понятно.
Круто
Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.
Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9
Пример уже есть, интересно было бы посмотреть?
@@-Vladimir-- примеры не могу показать, так как крипта и анонимность.
Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"
@@michaelkamkoа можете поделиться конкретно формулами, пж🙏
@@Spluny формула такая : переменная для обычного текста: 2.4 dvh (2.4 vw для портретной ориентации).
Размеры больше: 3.2, 4.8, 6.4 и так далее.
Размеры меньше: 1.6, 1,2
(Надеюсь, ничего не напутал)
IE 11 до сих пор не поддерживает(
А есть видео как такую среду разработки создать и настроить? Пока балуюсь в блокноте, но это только для простых вещей.
Да, видео по редактору VS Code ua-cam.com/video/942oq0_v95E/v-deo.html
Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.
Тогда вам помогут медиа запросы, в сочетании с vw единицами измерения для размера текста.
@@WebCademy я так понимаю, то без медиазапросов всё равно никуда не денешься для адаптивной вёрстки?
@@ВиталийДавыдов-э4г Да, они все равно нужны.
@@WebCademy Обречённость... они же подтормаживают загрузку..
@@ВиталийДавыдов-э4г На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.
Есть ли видео точно также но с блоками дивами картинками?
Есть ua-cam.com/video/kATSvTqBfPw/v-deo.html
@@WebCademy спасибо большое
Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)
Если у элемента всегда одинаковый размер то и менять его не надо и clamp в таком случае не нужен.
@@WebCademy большое спасибо, тоже пришёл к такому выводу)
firefox эта функция отрабатывает не так как ожидаешь, если использоват ее с rem единицами))
Привет! Хотел скачать код но там стоит пароль чтоб извлечь из папки .Получается что код не посмотреть ?
Какой пароль? К этому урока нет архива с кодом. О каком архиве вы пишите, скиньте ссылку.
И я никогда не ставлю пароли на архивы с кодом которые выкладываю в общий доступ.
А как сделать выделение тела блока уголком как на видео ? Скажешь как с меня подписка навсегда
Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.
@@WebCademy11:06 когда например медиа запрос открываешь у тебя от открывающей скобки до закрывающей уголок подсвечивается
@@WebCademy1:06 там также
@@АлексейВольнов-ш2ч Настройка Editor › Bracket Pair Colorization: Enabled
Почему бы не использовать классически устоявшиеся относительные величины, rem, em вместо этого?
Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)
width можно так задавать ?
Можно
@@WebCademy а как ?
@@artyrdanilov2791 Например так:
width: clamp(200px, 20vw, 600px);
а можно ли это использовать для чего-то еще кроме font-size?
Да, например для width или height, margin, padding.
не проще написать миксин?
Проще чем что? Конечно вместо расчетов каждый раз через онлайн сервис, можно написать миксин с нужными расчетам и использовать его.
@@WebCademy проще, чем вот это вот всё.
👍
4:20
6:26
8:36
Для етого сервиса нужен еще один сервис чтоби переводть в пиксели, рукалицо
Спасибо!